How to solve CORS policy problem for Strapi?

peteresteris · January 5, 2021, 6:35pm

Indeed on my firefox it works fine. The problem is when I try to connect from my phone once the app is compile and run on it.
I am using node v14.15.3. Strapi 3.4.1 installed step by step using strapi documentation.
The only thing I maintain is the API folder.
Anyway, this is the code on my front-end Ionic:

public login(email: string, pass: string) {
    const loginInputData = new LoginInputData();
    loginInputData.identifier = email;
    loginInputData.password = pass;
    const h2 = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json; charset=utf-8',
        'Access-Control-Allow-Origin': '*',
      })
    };
    console.log('Login headers: ', h2.headers.get('Access-Control-Allow-Origin'));
    return this.http.post<UserData>(this.strapiCnx.getLoginStr(), JSON.stringify(loginInputData), h2);
  }

As you can see, it is when I try to login an user. I repeat, this code works on my pc where I am programming the app.

Greetings

peteresteris · January 5, 2021, 6:51pm

I got this from my pc where the connection success perfectly:

How can I see the same on my device (webview)? On Android I got something like “ERROR TypeError: Cannot read property ‘0’ of undefined”

When I searched about this, people said that it is a CORS problem.

In the version 3.0.0 beta xx and before, I solved the problem adding the config to the security.json and adding headers to the front-end. Now, I do what tutorial says and it doesn’t work for me.

It is a mess for me. I am wasting my time right now…

sunnyson · January 6, 2021, 9:09am

@peteresteris
So from your screenshot on desktop, it seems that you are making the request from localhost:8100 to 192.168.0.50:1337, what about mobile? what addresses are you accessing on it?

peteresteris · January 7, 2021, 5:15am

That is a good observation. I don’t know how to see the requesting from the device. The code works perfectly from my localhost requesting to my virtual server. Once, on a minor version (<3.0.0) of strapi I could configurate the server and the client, using config/enviroment/… folders and JSON config archives. But, this is not working anymore. I upgrade strapi and configurated middleware.js, but it is not work.
I checked my connection from my device to the server via ping. But, when I tried to access to the server using postboy from the mobile, I obtained an error.

private server = 'http://192.168.0.50'; private port = '1337';

…

getLoginStr(){
     return this.server + ':' + this.port + '/auth/local';
 }

That way, I construct my address for login to strapi.
I know there is an issue connecting from webview that makes different the origin and strapi looks that like a different source. But, I couldn’t find the solution…

sunnyson · January 7, 2021, 7:57am

You could try to allow CORS for any host, just to be sure that the problem is caused by cors or you should investigate something else.

./config/middleware.js

module.exports = {
  //...
  settings: {
    cors: {
      origin: ['*'], //allow all
    },
  },
};

You still can create different folders per environment. The folder got renamed from environment to env.

This is the current structure if you want to create different configs per envs:
./config/env/{env}/{filename}

sunnyson · January 7, 2021, 8:01am

If allowing all hosts doesn’t help, then also try to allow all headers, since they also cause CORS problems:

module.exports = {
  //...
  settings: {
    cors: {
      origin: ['*'], //allow all origins
      headers: ['*'], //allow all headers
    },
  },
};

peteresteris · January 7, 2021, 8:00pm

I tried this solution too, and nothing happened.
I tried with brackets and only ‘*’.

peteresteris · January 7, 2021, 8:02pm

I didn’t know the format of forlders is still being used.
I will put brackets [] on the origin but I tried that before.
How can I see webview console of my device?
How do I know middleware.js is running on my strapi server?

sunnyson · January 8, 2021, 3:21pm

Irdk, that’s not a thing related to Strapi, so I would suggest to google it, there you will find more information on how to debug mobile browser. As I remember there is a thing in Developer tools where you active USB debugging and on your phone you should also activate USB debugging. Then you connect the phone through USB to your PC and it will detect it in the browser. Something like that.

You can run the app in console mode: yarn strapi console, now you can execute real-time commands inside the server, type the following command: strapi.middleware, it will return an object with all the middlewares:

peteresteris · January 8, 2021, 11:16pm

Thanks a lot pal…I didn’t solve the problem but now I have almost a confirmation. I realize a couple of things.
One, the device is sending correctly the request:
Accept: application/json, text/plain, /
Access-Control-Allow-Origin: *
Content-Type: application/json; charset=UTF-8
Referer: http://localhost/
User-Agent: Mozilla/5.0 (Linux; Android 9; Redmi Note 6 Pro Build/PKQ1.180904.001; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/87.0.4280.101 Mobile Safari/537.36

Two, the strapi server is refusing the request:
Failed to load the response data

And finally, Strapi is not loading my configuration via middleware.js:

I disable on purpose cors on my middleware.js and checked with yarn strapi console and it still continues enabled.

I don’t know what I am doing bad in this case…

DMehaffy · January 11, 2021, 10:52pm

@peteresteris is your code somewhere public I can take a look?

peteresteris · January 14, 2021, 5:44pm

Sorry pal, I recently look your answer. I am not on my computer now.
I am working in ionic and I am using Cordova http installed on capacitor. I know that it is used for web browsers but it is supposed that works with the right strapi cors configuration.
The other way is hardest one. I will have to reprogram all my code making two services. One for browser and other for devices using advanced-native-http and use condition to select one or the other depending on platform.
Or, to use only native-advanced-http and ionic proxy.
Both ways are hard. I have working we promises and I will have to refactor all my code in order to use observables.

wilkersoh · January 19, 2021, 1:46am

May i know what is the exactly path for this file? Is it
/middlewares/config/middleware.js? I a bit not sure that, it show ./config/midldleware.js in the docs.

sunnyson · January 19, 2021, 7:33am

You are not sure about documentation?

./config/middleware.js

wilkersoh · January 21, 2021, 7:14am

Thank for you replied. i already found the right path for this middleware.js file.

In the past, I’d to know the path of the folder for the middleware.js.
In the docs, it show ./config/middleware.js. I wondering is it
/app/config/middleware.js or
/app/middlewares/config/middleware.js

DMehaffy · January 26, 2021, 9:39pm

This is the correct path, our documentation may not make this very clear. Most of the pathing terminology comes from Linux/Mac where ./ means the current folder, and it’s implied that the “current folder” is the root of the Strapi application.

wilkersoh · January 27, 2021, 3:16am

Thank for your time to replied. =)

Karam_Sahu · February 21, 2021, 1:43pm

In my case, I was missing to add the protocol, after adding http:// the cors error stopped.

ISHAN_MAHAJAN · April 19, 2021, 5:29pm

For me, some extension was causing the issue which I’m not sure which one but using incognito window fixed it.

ajithcravi · May 11, 2021, 4:27am

Hello people,
Hope this helps someone like me.

Summary
In my frontend apollo-client I have given the uri without ‘http://’

Front-end
Framework: Angular
Graphql client: apollo-client
File path: app > graphql.module.ts
To do: Check if the value of constant uri correct. If it is localhost, give ‘http://localhost:1337’(replace the port number with yours)