在开发Vue.js应用时，遇到CORS（跨源资源共享）策略报错是一个常见的问题，CORS策略是为了防止恶意网站窃取数据而设置的一种安全机制，当你的Vue.js应用试图从一个不同的源（协议、域名或端口）请求资源时，浏览器会自动应用CORS策略，这可能导致跨源请求失败。

CORS策略报错解析

报错原因

当你在使用Vue.js进行开发时，可能会遇到以下类型的CORS策略报错：

• “Cannot load http://example.com/resource: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.”
  这意味着你的应用尝试从一个不同的源加载资源，但服务器没有返回正确的Access-Control-Allow-Origin头部。

• “The server responded with status code 403 Forbidden.”
  这通常意味着服务器拒绝了请求，可能是由于CORS策略配置不当或服务器配置错误。

  

解决方法

要解决CORS策略报错,你可以采取以下几种方法：

1 服务器端配置

1. 检查服务器配置：确保服务器配置允许跨源请求，如果你使用的是Node.js和Express，可以在服务器响应中添加Access-Control-Allow-Origin头部。

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

2. 使用代理服务器：如果你不能直接修改服务器配置，可以考虑使用代理服务器来转发请求，Vue CLI创建的项目中，你可以通过配置vue.config.js来设置代理。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

2 客户端配置

1. 修改请求头：在某些情况下，你可能需要修改请求头以允许跨源请求，这可以通过JavaScript的XMLHttpRequest或fetch API来实现。

fetch('http://example.com/resource', {
  method: 'GET',
  headers: {
    'Origin': 'http://yourapp.com'
  }
});

表格：CORS策略报错常见原因及解决方法

FAQs

Q1：为什么我的Vue.js应用在本地开发时没有CORS策略报错，但在生产环境中却出现了？

A1： 这可能是由于本地开发环境中的代理服务器或浏览器的安全策略导致的，在生产环境中，代理服务器可能没有正确配置，或者浏览器的安全策略更严格，导致CORS策略报错。

Q2：我使用了代理服务器，为什么仍然收到CORS策略报错？

A2： 确保代理服务器正确配置，并且目标服务器允许来自代理的请求，检查代理服务器是否正确设置了Access-Control-Allow-Origin头部，并且确保代理的URL与你的Vue.js应用配置的代理URL相匹配。