Vue 怎么实现跨域？

在 Vue 项目中，跨域问题一般出现在你前端代码请求后端接口时，例如：

axios.get('http://api.example.com/data')

如果前后端不是同一个源（协议+域名+端口），就会触发浏览器的CORS（跨域资源共享）限制。

Vue 项目实现跨域的常见方法

Vue CLI 提供了开发服务器代理功能，可以将前端请求转发到后端服务器，避免浏览器跨域限制。
在 vue.config.js 文件中添加如下配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend.example.com', // 目标后端服务器
        changeOrigin: true, // 修改请求头中的 origin
        pathRewrite: { '^/api': '' } // 重写路径（如果需要）
      }
    }
  }
};

请求方式：

axios.get('/api/users') // 实际会代理为 http://backend.example.com/users

方式二：后端开启 CORS 支持

让后端响应头中包含以下字段：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization

方式三：使用 JSONP（只适用于 GET 请求）

JSONP 是一种早期绕过浏览器跨域限制的方案，只适用于 GET 请求，不适合现代项目。现代浏览器推荐使用 CORS 或代理。
如果使用第三方接口，比如通过地图 API 获取地址信息，而不是直接嵌入地图，可以通过 JSONP 请求来实现跨域。

npm install jsonp

import jsonp from 'jsonp';

jsonp('https://restapi.amap.com/v3/ip?key=你的Key', null, (err, data) => {
  if (!err) {
    console.log('定位数据：', data);
  }
});

小结

方法	场景	是否推荐
开发环境代理 (vue.config.js)	开发调试	✅ 推荐
后端设置 CORS	正式部署	✅ 推荐
JSONP	GET 请求，后端不支持 CORS	❌ 不推荐