Why does my JavaScript code receive a “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error, while Postman does not?

3 years Ago 3 Min Read 942 Views

Solution:

It seems that you are sending an XMLHttpRequest, if I understand correctly, to a domain other than the one your page is located on. It is blocking the request because the browser usually allows the request from the same origin. If you wish to make cross-domain requests, you will need to do something completely different. How to use CORS is the tutorial.

These restrictions do not apply to the use of postmen. Cross-Origin XMLHttpRequest

Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they’re limited by the same origin policy. Extensions aren’t so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.

WARNING: Using Access-Control-Allow-Origin: * can make your API/website vulnerable to cross-site request forgery (CSRF) attacks. Make certain you understand the risks before using this code.

This is very easy to do if you use PHP. Simply add the following script to your PHP page that handles the request.

<?php header('Access-Control-Allow-Origin: *'); ?>

Use Node-red to enable CORS by un-commenting these lines.

// The following property can be used to configure cross-origin resource sharing
// in the HTTP nodes.
// See https://github.com/troygoode/node-cors#configuration-options for
// details on its contents. The following is a basic permissive set of options:
httpNodeCors: {
 origin: "*",
 methods: "GET,PUT,POST,DELETE"
},

Flask can be used in the same way as the question. First, install flaskcors

$ pip install -U flask-cors

Include Flask cors to your application.

from flask_cors import CORS

The following is an example of a simple application:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/")
def helloWorld():
  return "Hello, cross-origin-world!"

Flask documentation provides more details.

Because

$.ajax({type: “POST” – calls OPTIONS

$.post( – Calls POST

Both are different. Postman calls “POST” properly, but when we call it, it will be “OPTIONS”.

For C# web services – Web API

Please add the following code in your web.config file under <system.webServer> tag. This will work:

Please make sure you are not making any mistakes in the Ajax call.

jQuery

Note: If you are looking for downloading content from a third-party website, then this will not help you. You can try the following code, but not JavaScript.

 

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
</httpProtocol>

 

$.ajax({
    url: 'http://mysite.microsoft.sample.xyz.com/api/mycall',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    type: "POST", /* or type:"GET" or type:"PUT" */
    dataType: "json",
    data: {
    },
    success: function (result) {
        console.log(result);
    },
    error: function () {
        console.log("error");
    }
});

 

System.Net.WebClient wc = new System.Net.WebClient();
string str = wc.DownloadString("http://mysite.microsoft.sample.xyz.com/api/mycall");