11

I receive the following error when i try to access my local server with a POST request:

XMLHttpRequest cannot load http://127.0.0.1:8000/api/v1/users/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

My server allows CORS because I've tested it by sending the request with postman and it works.

Here is my code in the front-end:

private headers = new Headers({
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, PATCH, DELETE',
    'Access-Control-Allow-Headers': 'X-Requested-With,content-type',
    'Access-Control-Allow-Credentials': true 
});


postLogin(data) {
    console.log(data);
    return new Promise((resolve) => {
        this.http.post(this.api + "users/login", data, {headers: this.headers})
            .map(res => res.json())
            .subscribe(answer => {
                 this.loggedIn = true;
                 this.token = answer.token;
                 resolve(answer);
            });
    });
 }

PS: I did not get this error with a GET request.

I tried to put a proxy and it doesn't change anything :(

This is my ionic.config.json:

{
  "name": "hardShop",
  "app_id": "",
  "v2": true,
  "typescript": true,
  "proxies": [
      {
          "path": "/api",
          "proxyUrl": "http://127.0.0.1:8000"
      }
  ]
}
1
  • 1
    This looks like your server does not support CORS. Are you sure you implemented it correctly? I think postman does not have any issues with CORS, so just because it works in Postman does not mean that your server supports CORS. Try looking at the response in your Ionic app if there are any CORS related headers present. Jun 10, 2017 at 10:37

3 Answers 3

18

Try again using this plugin in your browser.

It allows you to ajax request any address from any source, bypassing http/https security requirements or other limitations set by browsers (known as CORS). Practically it injects the 'Access-Control-Allow-Origin': '*' header in the received response before it is passed on to your app running in the browser.

Please keep in mind that this is a band-aid solution, predominantly for development. Your server's response has to actually have the 'Access-Control-Allow-Origin': '*' header, preferably with a more specific value than *.

What you are doing now has practically no effect, since you as the client are sending a request with that header to the server, who then promptly ignores it. What matters is that the server has this header in his response to your client.

Postman doesn't apply CORS as far as i know, so maybe that's why it's not affected.

3
  • 3
    In it's current state this should be a comment. You should explain what this add-on is and how it can help solve the problem. Jun 10, 2017 at 10:42
  • I agree with @rottenoats. Also, this does not solve the problem if he wants to deploy the app as a webapp or if he is using WkWebView on iOS, which enforces CORS even on a device. Jun 10, 2017 at 10:47
  • Your link to plugin is broken of may be plugin is removed.
    – Saad Khan
    Oct 2, 2019 at 7:43
1

This errors shows when you are connecting a Http with a https i.e a secured layer. I got the same error when I was calling a rest service that was in a Secured server with Https to my application running in localhost.

To allow that, you need to install a plugin in your browser which would pass this lock.

If you are using chrome, install CORS plugin for chrome and it will work.

0
0

One reason of this problem can be (personal experience): May be you have deployed the wrong connectionstring for database.

I was using the following two database connections, one for local storage and other for server storage

const localhost = await mongoose.connect('mongodb://localhost:27017/categories');
const serverhost = await mongoose.connect('mongodb://usename:password@ds015126.mlab.com:12345/myapp');

some may be using two connectionStrings just like me and deploy the localhost database-connection instead of real server database-connection and then try to access the database via postman or client-application then face such problem.

Be sure, you have deployed the right connectionstring.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.