vue has been blocked by cors policy: no 'access-control-allow-origin' header

CORS（跨源资源共享）是一种安全机制，用于限制Web页面中的脚本对其他域的访问。当一个请求违反CORS策略时，浏览器会阻止该请求，并抛出一个错误，例如“vue has been blocked by CORS policy: no 'access-control-allow-origin' header”。

基础概念

CORS 是一种基于HTTP头的机制，允许服务器指示浏览器从不同的源（域）加载资源。它通过在服务器响应中添加特定的HTTP头来实现。

相关优势

1. 安全性：防止恶意网站读取敏感数据。
2. 灵活性：允许合法的跨域请求，提高Web应用的交互性。

类型

• 简单请求：满足特定条件的请求（如GET、POST、HEAD方法，且HTTP头有限）。
• 预检请求：不满足简单请求条件的请求会先发送一个OPTIONS请求进行预检。

应用场景

• API服务：前后端分离的应用中，前端应用通常部署在不同的域上。
• 资源共享：多个应用需要共享某些资源。

遇到的问题及原因

问题：Vue应用在请求跨域资源时被阻止。 原因：

• 服务器没有设置Access-Control-Allow-Origin头。
• 请求的方法或头不被服务器允许。

解决方法

后端设置CORS头

在服务器端添加Access-Control-Allow-Origin头，允许特定的源访问资源。

示例（Node.js + Express）：

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

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*'); // 允许所有源，也可以指定特定源，如 'http://example.com'
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

app.get('/data', (req, res) => {
  res.json({ message: 'This is data from the server' });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

使用代理服务器

在前端项目中配置代理服务器，将请求转发到目标服务器。

示例（Vue CLI）： 在vue.config.js中配置代理：

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

总结

CORS策略是为了保护Web应用的安全性，但有时会导致跨域请求被阻止。通过在服务器端设置适当的CORS头或使用代理服务器，可以有效解决这一问题。确保理解并正确配置CORS策略，以保证应用的正常运行和安全性。