Vue 反向代理 解决跨域

反向代理

在vue项目根目录下创建vue.config.js

// vue.config.js 放根目录
//  反向代理 解决跨域
module.exports = {
  // 搭建服务器
  devServer: {
    // 拦截
    proxy: {
      "/api": {
        // 目标地址
        target: "http://localhost:3000",
        // 路径重写
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },
};

原理：

让proxy通过vue帮你产生一个代理服务器，

然后通过这个代理服务器去请求数据，最后把请求的数据返回给你

/api，表示，哪一种接口需要使用跨域？

如果我请求的路径是以/api开头，则使用代理服务器

毕竟不是所有的接口都需要使用跨域

target：要跨域跳转到的位置

 pathRewrite:{
                    '^/api':''
                }

根据你访问的路径判断是否要使用跨域，如果是以/api开头的，

则接下来拼接的时候，会把/api给省略掉

通过pathRewrite拼接重新后： 

从：http://localhost:3000/api/login

把/api重写为空， 

即为：http://localhost:3000/login

总结跨域 

1、jsonp

原理:

动态生成script标签,通过src属性加载

缺点:不支持POST

2、中间服务器代理

前端部署地址:127.0.0.1:8000

中间服务器:127.0.0.1:8000

目标服务器地址:127.0.0.1:8888

3.CORS跨域资源共享

服务器端进行配置,加一个响应头

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

4.反向代理