Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not? Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not? javascript javascript

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


If I understood it right you are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request. A tutorial about how to achieve that is Using CORS.

When you are using postman they are not restricted by this policy. Quoted from 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.

It's very simple to solve if you are using PHP. Just add the following script in the beginning of your PHP page which handles the request:

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

If you are using Node-red you have to allow CORS in the node-red/settings.js file by un-commenting the following 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"},

If you are using Flask same as the question; you have first to install flask-cors

$ pip install -U flask-cors

Then include the Flask cors in your application.

from flask_cors import CORS

A simple application will look like:

from flask import Flaskfrom flask_cors import CORSapp = Flask(__name__)CORS(app)@app.route("/")def helloWorld():  return "Hello, cross-origin-world!"

For more details, you can check the Flask documentation.


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:

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

Please make sure you are not doing any mistake in the Ajax call

jQuery

$.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");    }});

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.

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