跨域问题

跨域是指浏览器的同源策略限制：当前端页面的协议、域名、端口三者中任意一个与请求的后端接口不一致时，浏览器会阻止该请求，这一限制是为了保障网页安全。

  • 同源定义：协议（如http/https）、域名（如a.com/b.com）、端口（如80/8080）完全相同。
  • 举例：Vue 项目（运行在http://localhost:8080）请求后端接口http://api.example.com，因域名不同会触发跨域。

2. Vue 中如何解决跨域

Vue 项目中常用的跨域解决方案有以下 2 种：

（1）开发环境：配置 Vue 脚手架的代理（vue.config.js）

通过 webpack 的 devServer 代理，将前端请求转发到后端接口，避开浏览器同源限制：

1
2
3
4
5
6
7
8
9
10
11
12
// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': { // 匹配以/api开头的请求
        target: 'http://api.example.com', // 后端接口地址
        changeOrigin: true, // 开启跨域（伪装请求来源为目标域名）
        pathRewrite: { '^/api': '' } // 去掉请求路径中的/api前缀
      }
    }
  }
};

使用时，前端请求/api/user会被代理到http://api.example.com/user。

（2）生产环境：后端配置 CORS（跨域资源共享）

由后端在响应头中添加允许跨域的配置，常见的响应头包括：

  • Access-Control-Allow-Origin: http://your-frontend-domain（允许指定前端域名跨域）
  • Access-Control-Allow-Methods: GET,POST,PUT,DELETE（允许的请求方法）
  • Access-Control-Allow-Headers: Content-Type（允许的请求头）