vue项目之跨域解决方案

跨域常见解决方案

• jsonp (项目基本不用)

原理：动态生成script标签，通过src属性加载
缺点：不支持POST请求，支持get请求
应用场景：有些第三方数据接口可能会使用jsonp解决跨域问题，工作中不怎么用。

• 中间服务器代理

A前端部署地址：127.0.0.1：8000
B中间服务器：127.0.0.1：8000
C目标服务器地址：127.0.0.1：8888

因为浏览器的同源策略，A 和 c 存在跨域问题，A 无法访问 服务器c
解决：因为跨域问题仅存在于浏览器（**服务器请求服务器的数据，没有跨域问题**），所以后台可以搭建中间服务器
让服务器B请求服务器c，然后将数据返回给前端A.

• CORS跨域资源共享，服务器端进行配置，( 后端开发人员设置 )加一个响应头（工作中常用）

res.header("Access-Control-Allow-Origin","*")

• vue.config.js vue反向代理 ( 前端开发人员设置 )

module.exports = {
    lintOnSave: false,
    devServer: {
        // 设置代理
        proxy: {
            "/api": {
                target: "http://127.0.0.1:8888/api/private/v1", // 域名
                ws: true, // 是否启用websockets
                changOrigin: true, // 开启代理：在本地会创建一个虚假服务器，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                pathRewrite: {     // 路径重写：将 /api 替换为 / 
                    "^/api": "/"
                }
            }
        }
    }
}