How to Fix CORS Error in Vue.js

Are you running into the No Access-Control-Allow-Origin error while working on your Vue.js project? You’re not alone. In this guide, you’ll learn clear, step-by-step methods to fix the CORS error in Vue.js and quickly get back to building your website.

CORS Error

What’s the Issue with CORS?

Cross-Origin Resource Sharing (CORS) in combination with Same Origin Policy (SOP) controls the resource sharing between origins. SOP is a security feature enforced by browsers to prevent your web app from making requests to a different origin without explicit permission, while CORS is a mechanism to allow certain origins to access the resource. When you see the error, it means the server you’re trying to reach isn’t allowing your Vue.js app to access its resources.

Origin structure

Fixing CORS When Fetching Your Own Backend

If you control the backend, fixing CORS is pretty straightforward.

1. Add the Appropriate CORS Headers

Make sure your backend returns the proper CORS headers. The key header is:

• Access-Control-Allow-Origin: Set this to the origin of your Vue.js app or use a wildcard (*) for development purposes (not recommended for production).

For example, in Node.js with Express, you can use middleware like:

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "http://your-vuejs-app.com");
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
  res.header("Access-Control-Allow-Headers", "Content-Type, Authorization");
  next();
});

You can find more implementations for different backends in this resource: Enable CORS.

2. Enable OPTIONS Requests (Preflight Requests)

Browsers will send a preflight OPTIONS request when making cross-origin requests with:

• Custom request headers
• Methods other than GET/POST
• Specific content types

Adjust your server to respond to OPTIONS requests with the necessary headers, you can find things that trigger preflight requests in this StackOverflow Answer.

Fixing CORS When Fetching Others’ Backends

Sometimes you’re working with third-party APIs or resources that don’t include CORS headers. Here’s how to work around it.

If You Have Your Own Backend (Recommended)

Instead of calling the external API directly from your Vue.js app:

• Set Up a Proxy Endpoint: In your backend, create an endpoint that makes the API call to the external service.
• Fetch from Your Frontend: Have your Vue.js app call your backend instead. This way, the external request is made server-to-server, bypassing browser CORS restrictions.

If You Don’t Have a Backend (Recommended)

Use a CORS Proxy. It works by sending the request to the external API on your behalf and then returning the response to your Vue.js app with the appropriate CORS headers. This way, you can bypass the browser’s CORS restrictions.

fetch("https://proxy.corsfix.com/?https://example.com/api")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((err) => console.error(err));

CORS Proxy usage example

Temporary Solutions for Development

If you’re in a pinch, here are a couple of quick fixes:

Browser CORS Unblockers

Browser extensions or settings that disable CORS can help you get around the issue temporarily. Note: This isn’t a solution for production, it’s just a quick way to test your app.

Browser extensions for unblocking CORS

Using a Local Proxy

You can configure your local development server (like Vue.js CLI’s proxy configuration) to reroute API requests:

1. Create a Vue.js configuration file (vue.conf.json) with your proxy settings.

module.exports = {
  devServer: {
    proxy: {
      "^/api": {
        target: "<url>",
        ws: true,
        changeOrigin: true,
      },
      "^/foo": {
        target: "<other_url>",
      },
    },
  },
};

2. Send your request to the proxy endpoint instead of the external API.

fetch("/api/data")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((err) => console.error(err));

Using a local proxy

This approach is helpful when developing your Vue.js app, but not for production.

Conclusion

Now you know how to fix the CORS error in Vue.js. Whether you’re managing your own backend or working with third-party APIs, the key is understanding how CORS works and configuring your requests appropriately.

If you are looking for a CORS proxy, check out Corsfix. It is free to get started, and you only need to upgrade when you go to production.