Axios ошибка cors

I’ll have a go at this complicated subject.

What is origin?

The origin itself is the name of a host (scheme, hostname, and port) i.g. https://www.google.com or could be a locally opened file file:// etc.. It is where something (i.g. a web page) originated from. When you open your web browser and go to https://www.google.com, the origin of the web page that is displayed to you is https://www.google.com. You can see this in Chrome Dev Tools under Security:

The same applies for if you open a local HTML file via your file explorer (which is not served via a server):

What has this got to do with CORS issues?

When you open your browser and go to https://website.example, that website will have the origin of https://website.example. This website will most likely only fetch images, icons, js files and do API calls towards https://website.example, basically it is calling the same server as it was served from. It is doing calls to the same origin.

If you open your web browser and open a local HTML file and in that HTML file there is JavaScript which wants to do a request to Google for example, you get the following error:

The same-origin policy tells the browser to block cross-origin requests. In this instance origin null is trying to do a request to https://www.google.com (a cross-origin request). The browser will not allow this because of the CORS Policy which is set and that policy is that cross-origin requests is not allowed.

Same applies for if my page was served from a server on localhost:

Localhost server example

If we host our own localhost API server running on localhost:3000 with the following code:

const express = require('express')
const app = express()

app.use(express.static('public'))

app.get('/hello', function (req, res) {
    // res.header("Access-Control-Allow-Origin", "*");
    res.send('Hello World');
})

app.listen(3000, () => {
    console.log('alive');
})

And open a HTML file (that does a request to the localhost:3000 server) directory from the file explorer the following error will happen:

Since the web page was not served from the localhost server on localhost:3000 and via the file explorer the origin is not the same as the server API origin, hence a cross-origin request is being attempted. The browser is stopping this attempt due to CORS Policy.

But if we uncomment the commented line:

const express = require('express')
const app = express()

app.use(express.static('public'))

app.get('/hello', function (req, res) {
    res.header("Access-Control-Allow-Origin", "*");
    res.send('Hello World');
})

app.listen(3000, () => {
    console.log('alive');
})

And now try again:

It works, because the server which sends the HTTP response included now a header stating that it is OK for cross-origin requests to happen to the server, this means the browser will let it happen, hence no error.

Just to be clear, CORS policies are security features of modern day browsers, to protect people from harmful and malicious code.

How to fix things (One of the following)

• Serve the page from the same origin as where the requests you are making reside (same host).
• Allow the server to receive cross-origin requests by explicitly stating it in the response headers.
• If using a reverse proxy such as Nginx, configure Nginx to send response headers that allow CORS.
• Don’t use a browser. Use cURL for example, it doesn’t care about CORS Policies like browsers do and will get you what you want.

Example flow

Following is taken from: Cross-Origin Resource Sharing (CORS)

Remember, the same-origin policy tells the browser to block
cross-origin requests. When you want to get a public resource from a
different origin, the resource-providing server needs to tell the
browser «This origin where the request is coming from can access my
resource». The browser remembers that and allows cross-origin resource
sharing.

• Step 1: client (browser) request When the browser is making a cross-origin request, the browser adds an Origin header with the
  current origin (scheme, host, and port).

• Step 2: server response On the server side, when a server sees this header, and wants to allow access, it needs to add an
  Access-Control-Allow-Origin header to the response specifying the
  requesting origin (or * to allow any origin.)

• Step 3: browser receives response When the browser sees this response with an appropriate Access-Control-Allow-Origin header, the
  browser allows the response data to be shared with the client site.

More links

Here is another good answer, more detailed as to what is happening: https://stackoverflow.com/a/10636765/1137669

Cross-origin resource sharing (CORS) is a security feature that prevents a web browser from making requests to a resource from another domain. This is done to protect users from malicious websites that could try to steal their data.

In React, Axios is a popular library for making HTTP requests. When you use Axios to make a request to a resource from another domain, you may encounter a CORS error.

This article will show you how to fix CORS error in React Axios.

What is a Axios CORS error?

An Axios CORS error occurs when making an HTTP request using the Axios library in a web browser, and the request is blocked by the browser’s security feature known as the Same-Origin Policy (SOP). The Same-Origin Policy is a security measure implemented by web browsers to prevent web pages from making requests to a different domain than the one that served the web page. This policy is in place to protect users from potential security vulnerabilities like cross-site request forgery (CSRF) and data theft.

When an Axios request violates the Same-Origin Policy, the browser blocks the request, and Axios throws a CORS (Cross-Origin Resource Sharing) error. This error typically occurs in scenarios where the client-side JavaScript code (running in the browser) attempts to make a request to an API hosted on a different domain than the one serving the web page.

The CORS error includes information about which domain attempted the request, which domain the request was intended for, and the specific reason why the request was blocked.

To resolve the Axios CORS error, the server hosting the API needs to include appropriate CORS headers in its response. These headers inform the browser that cross-origin requests from specific domains are allowed. The most common CORS header is Access-Control-Allow-Origin, which specifies the domains that are permitted to access the API.

For example, if your API is hosted at https://api.example.com and you want to allow requests from https://your-web-app.com, the server response should include the following header:

Access-Control-Allow-Origin: https://your-web-app.com

By setting the appropriate CORS headers on the server, the browser will allow Axios requests from your web application, and the CORS error will be resolved.

There are a few ways to fix CORS error in React Axios.

1. Configure the Server

The first step is to configure the server to allow cross-origin requests. This can be done by adding the following header to the response:

Access-Control-Allow-Origin: *

This will allow all cross-origin requests to be made to the server. You can also specify specific origins that are allowed to make cross-origin requests by using the Access-Control-Allow-Origin header.

For example, to allow only requests from the https://example.com domain to make cross-origin requests, you would add the following header to the response:

Access-Control-Allow-Origin: https://example.com

To configure the server to allow cross-origin requests using React Axios, you need to add the following code to your server:

app.use(cors());

This will allow all cross-origin requests. If you want to be more restrictive, you can add the following code to your server:

app.use(cors({
  origin: "http://localhost:3000",
  allowedHeaders: ["Origin", "X-Requested-With", "Content-Type", "Accept"],
}));

This will allow cross-origin requests from the domain http://localhost:3000 and only allow the specified headers to be sent with the request.

Once you have added this code to your server, you can make cross-origin requests from your React application using Axios. For example, the following code will make a GET request to the /api endpoint on the server:

axios.get("/api");

This request will be allowed because the server has been configured to allow cross-origin requests.

If you get a axios cors error when trying to make a cross-origin request, make sure that the server has been configured to allow cross-origin requests. You can also try adding the Access-Control-Allow-Origin header to the response from the server. For example, the following code will add the Access-Control-Allow-Origin header to the response from the /api endpoint:

app.get("/api", (req, res) => {
  res.header("Access-Control-Allow-Origin", "*");
});

This will allow all cross-origin requests to the /api endpoint.

2. Use the withCredentials Option

Another way to fix Axios CORS errors is to use the withCredentials option when making the request. This will allow the request to include cookies, which can be used to authenticate the user.

To use the withCredentials option, you need to add it to the options object when you make the request.

For example:

axios.get('https://example.com/api/data', {
  withCredentials: true
});

3. Use the axios cors options

Finally, you can also use the cors option when making the request. This will allow you to specify the specific axios CORS headers that you want to use.

To use the axios cors options, you need to add it to the options object when you make the request.

For example:

axios.get('https://example.com/api/data', {
  cors: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Headers": "Content-Type"
  }
});

Enable CORS React Axios

To enable CORS in React Axios, you can utilize the withCredentials and crossOrigin options.

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    axios
      .get("https://example.com/api/data", {
        withCredentials: true,
        crossOrigin: true,
      })
      .then(response => {
        setData(response.data);
      });
  }, []);

  return (
    <div>
      {data && <h1>Data: {data}</h1>}
    </div>
  );
};

By setting the withCredentials option to true, Axios will include cookies in the request. This is important when accessing authenticated resources.

The crossOrigin option allows Axios to handle cross-origin requests. This is necessary when your React app and the API are hosted on different domains.

Additionally, you can specify a specific origin that is permitted to make requests using the crossOrigin option. For instance, if you want to allow requests exclusively from the https://example.com domain, you can use the following code:

axios
  .get("https://example.com/api/data", {
    crossOrigin: "https://example.com",
  })
  .then(response => {
    setData(response.data);
  });

In the case of using a proxy server, you might need to configure it to support CORS requests.”

Please ensure to review the provided code for accuracy and suitability to your specific requirements.

How do I disable CORS security?

Disabling CORS security is not recommended for production environments as it can introduce serious security vulnerabilities. CORS (Cross-Origin Resource Sharing) is an important security feature implemented by web browsers to prevent unauthorized cross-origin requests, protecting users from potential attacks like cross-site request forgery (CSRF) and data theft.

However, during development or testing, you might encounter CORS issues when working with APIs from different domains. In such cases, there are a few workarounds to temporarily disable CORS security for testing purposes. Keep in mind that these methods should only be used in development environments and never in a production setup.

1. Using a CORS Browser Extension:
   Many modern web browsers offer extensions that allow you to disable CORS temporarily while testing. For example, you can use extensions like “Allow CORS: Access-Control-Allow-Origin” in Google Chrome or “CORS Everywhere” in Firefox. These extensions add the necessary headers to the requests, bypassing CORS restrictions.
2. Creating a Proxy Server:
   You can set up a proxy server on your development environment that acts as an intermediary between your frontend application and the remote API. The proxy server forwards API requests from your frontend and adds the required CORS headers. You can then make requests to the proxy server instead of directly to the API, avoiding CORS issues.
3. Using http-proxy-middleware (for React developers):
   If you are using React for your frontend development, you can use the http-proxy-middleware package to set up a proxy for your API requests. This way, you can bypass CORS restrictions during development. Here’s an example of how to do it in a setupProxy.js file:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'https://api.example.com',
      changeOrigin: true,
    })
  );
};

Remember that disabling CORS should only be done in a controlled development environment and never in production. CORS is an essential security mechanism to protect users and their data while using web applications. When deploying your application to production, ensure that proper CORS headers are configured on the server-side to allow legitimate cross-origin requests securely.

Conclusion

These are just a few ways to fix React Axios CORS error. If you are still having trouble, you can consult the Axios documentation or post a question on a forum or Stack Overflow.

FAQs

1. How do I resolve a CORS problem?

There are a few ways to resolve a Axios CORS problem. One way is to make sure that the server is configured to allow cross-origin requests. This can be done by adding the following header to the response:

Access-Control-Allow-Origin: *

Another way to resolve a Axios CORS problem is to use the withCredentials option when making the request. This will allow the request to include cookies, which can be used to authenticate the user.

axios.get('https://example.com/api/data', {
  withCredentials: true
});

Finally, you can also use the cors option when making the request. This will allow you to specify the specific CORS headers that you want to use.

axios.get('https://example.com/api/data', {
  cors: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Headers": "Content-Type"
  }
});

2. What is cross origin error in react?

A cross origin error in React occurs when a request is made from one domain to another domain and the server does not allow cross-origin requests. This can happen for a variety of reasons, such as the server not being configured to allow cross-origin requests or the request being made from a browser that does not support CORS.

3. What is the CORS policy in react?

The CORS policy in React is a set of rules that determine whether or not a request is allowed to cross domains. The policy is defined by the server and can be configured to allow or disallow certain types of requests.

4. How do I disable CORS security?

To disable CORS security, you can edit the server configuration file and remove the Access-Control-Allow-Origin header. However, it is important to note that disabling CORS security can expose your website to security vulnerabilities.

5. How do I fix CORS in Web API?

To fix CORS in Web API, you can add the following code to the WebApiConfig.cs file:

config.EnableCors();

This will allow all cross-origin requests to be made to the Web API. You can also specify specific origins that are allowed to make cross-origin requests by using the AddCorsOrigin method.

config.AddCorsOrigin("https://example.com");

This will allow only requests from the https://example.com domain to make cross-origin requests to the Web API.

>>Also Read

1. How to Call React Query Conditionally?

2. How to Call React Hook Conditionally?

Hello, this is my request:

axios({ method: 'POST', url:${SERVER_ADDRESS}/api/v1/manager/restaurant/${restaurantName}/payment-methods, crossDomain: true, data: { payment_methods: checkedPayments }, }) .then(() => { dispatch(loadPayments(restaurantName)); }).catch((error) => { console.log(error); dispatch(paymentsError()); });

the server is laravel 5, it is responding with:

XMLHttpRequest cannot load http://localhost:8000/api/v1/manager/restaurant/accusamus/payment-methods. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

Server headers are set with CORS middleware like this:

    return $next($request)
        ->header("Access-Control-Expose-Headers", "Access-Control-*")
        ->header("Access-Control-Allow-Headers", "Access-Control-*, Origin, X-Requested-With, Content-Type, Accept")
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS, HEAD')
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Allow', 'GET, POST, PUT, DELETE, OPTIONS, HEAD');

Theese are the response headers, which I get when I use postman:

Access-Control-Allow-Headers →Access-Control-, Origin, X-Requested-With, Content-Type, Accept
Access-Control-Allow-Methods →GET, POST, PUT, DELETE, OPTIONS, HEAD
Access-Control-Allow-Origin →
Access-Control-Expose-Headers →Access-Control-*
Allow →GET, POST, PUT, DELETE, OPTIONS, HEAD
Cache-Control →no-cache
Connection →close
Content-Type →text/html; charset=UTF-8
Date →Sat, 03 Dec 2016 10:33:04 GMT
Host →localhost:8000
X-Powered-By →PHP/7.0.13
X-RateLimit-Limit →60
X-RateLimit-Remaining →59
phpdebugbar-id →0ff14bef1824f587d8f278c87ab52544

AXIOS sends preflight which is:

Request URL:http://localhost:8000/api/v1/manager/restaurant/accusamus/payment-methods
Request Method:OPTIONS
Status Code:200 OK
Remote Address:[::1]:8000
Response Headers
view source
Allow:GET,HEAD,POST
Cache-Control:no-cache
Connection:close
Content-Type:text/html; charset=UTF-8
Date:Sat, 03 Dec 2016 10:25:27 GMT
Host:localhost:8000
X-Powered-By:PHP/7.0.13

Request Headers
view source
Accept:/
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:localhost:8000
Origin:http://localhost:3000
Referer:http://localhost:3000/restaurant-profile/payment
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.98 Safari/537.36

Am I doing something wrong? I can’t figure it how to do this. Witch Chrome plugin CORS everything works fine, but this is not the way.

Please help, help is really appreciated, spent hours with this.