How to having cors issue in axios

When discussing Cross-Origin Resource Sharing (CORS) issues, we refer to a security mechanism that allows or restricts web applications running within one domain to access resources hosted on another domain. By default, browsers prohibit cross-origin HTTP requests initiated from scripts, which is a security measure known as the same-origin policy. When using Axios, encountering CORS issues typically means that cross-origin request restrictions are encountered when attempting to access services on different domains from the client (e.g., JavaScript code running in the browser). There are several ways to handle this issue:

1. Setting CORS Headers on the Server

The most common and recommended approach is to configure CORS on the server. The server must include appropriate CORS headers in the response, such as Access-Control-Allow-Origin. This allows the server to explicitly permit specific domains to make cross-origin requests.

Example:

Assume your client code runs on http://client.example.com, and you are attempting to send a request via Axios to http://api.example.com/data. The server must include the following headers in the response:

http
Access-Control-Allow-Origin: http://client.example.com

Or, if you want to allow any domain to access server resources, you can set:

http
Access-Control-Allow-Origin: *

2. JSONP

For older servers or when you do not have permission to modify server configurations, you can use JSONP (JSON with Padding) to bypass CORS restrictions. However, note that JSONP only supports GET requests and is not a secure solution, as it is vulnerable to XSS attacks. Axios itself does not support JSONP, so you may need to use other libraries.

3. Proxy Server

Another approach is to use a proxy server. You can set up a proxy server where all client requests are first sent to this proxy server, which then forwards the request to the target server and returns the response to the client. This way, since all requests are initiated from the same domain, CORS issues do not exist.

In development environments, tools like webpack-dev-server typically provide proxy functionality.

Example:

javascript
// webpack.config.js
module.exports = {
  // ...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
      },
    },
  },
};

By using any of the above methods, CORS issues can be resolved when using Axios. However, the recommended approach in production is still to set CORS headers on the server, as it is the most direct and secure method.

I encountered the same CORS error while working on a Vue.js project.

You can resolve this issue by setting up a proxy server, or alternatively, disable the browser's (e.g., Chrome) security settings to access cross-origin APIs (which is a temporary solution and not the best approach for resolving the issue).

Both solutions worked for me. The latter solution does not require building any mock server or proxy server. Both approaches can be resolved on the frontend.

You can disable Chrome's security settings to access APIs from the source by entering the following command in the terminal:

shell
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir="/tmp/chrome_dev_session" --disable-web-security

After running the above command, a new Chrome window with security settings disabled will open. Now, run your program again (npm run serve / npm run dev), and you will no longer receive any CORS errors, allowing you to use Axios for GET requests.

For those who might have arrived here via a Google search, I'm highlighting my solution. I resolved the CORS issue by setting withCredentials to false when calling an external API from the browser UI:

javascript
axios({
  method: 'get',
  url: `https://api.someurl.com/subject/v2/resource/somevalue`,
  withCredentials: false,
  params: {
    access_token: SECRET_TOKEN,
  },
});

In this case, the security of the external API endpoint relies on access_token.