vue项目配置代理如何解决跨域问题

 

Vue项目配置代理

前端向服务器发送请求时,经常会遇到跨域问题,那么什么是前端跨域呢?

在vue项目中如何利用代理解决呢?

1. 这里以axios发请求为例

axios.get("/abc/def");
axios.get("/abc/ghi");
axios.post("/abc/jkm");

axios发送的请求是本地的服务器地址拼接上发送的请求,如 http://localhost:8080/abc/def

2. 如果发送的请求都以 /abc 开头

那么我们就可以在proxy中进行服务器代理配置。

devServer: {
    proxy: {
      "/abc": {
        target: "http://XX.XX.XX.XX:8081",
        changeOrigin: true,
        ws: true,
        secure: false,
      },
    },
},

"/abc":{} : 引号中代表监测的是以 /abc 开头的接口

target : 代表监测到以 /abc 开头的接口后,把axios请求中前面的本地服务器地址改为后端接口地址,实际发送给后端的请求就是下方后一个请求

http://localhost:8080/abc/def --> http://XX.XX.XX.XX:8081/abc/def

  • changeOrigin : 是否跨域
  • ws : 如果要代理 websockets,配置这个参数
  • secure : 如果是https接口,需要配置这个参数(如果是http接口,也可以不写这个参数)
  • pathRewrite :替换请求中匹配的内容。在3的方法2中详细解释用法,上方未使用此参数

3. 代理多个接口

http://localhost:8080/zzz/one

http://localhost:8080/xxx/two

方法1:监测多个接口,可以在proxy中写多个配置:(适用于target不同的代理,相同也可以用这个方法,就是会麻烦一点,对于相同的target方法2会比较方便)

devServer: {
    proxy: {
        "/zzz": {
          target: "http://XX.XX.XX.XX:8082",
          changeOrigin: true,
          ws: true,
        },
        "/xxx": {
          target: "http://XX.XX.XX.XX:8083",
          changeOrigin: true,
          ws: true,
        },
    },
},

那么实际发送给后端的请求就是:

http://XX.XX.XX.XX:8082/zzz/one

http://XX.XX.XX.XX:8083/xxx/two

方法2:使用axios进行前设置(适用于target相同的代理)

// 一般在全局设置里引入,例如main.js,方便第二行的配置被每一个axios请求识别
import axios from "axios";
// 只要发送axios请求,就在请求前加入/api的开头,例如 /zzz/one -> /api/zzz/one
axios.defaults.baseURL = "/api";    

进行了上方的配置后,在本地发送的请求会变为

http://localhost:8080/api/zzz/one

http://localhost:8080/api/xxx/two

而后可以设置只监听 "/api" 的代理,不过要设置pathRewrite参数:

devServer: {
    proxy: {
        "/api": {
            target: "http://XX.XX.XX.XX:8084",
            changeOrigin: true,
            ws: true,
            pathRewrite: {
              "^/api": "",
            },
        },
    },
},

pathRewrite :检查代理的请求中是否有 /api ,有的话把 /api 替换为冒号后面的内容,案例为替换成空字符串,也就是删去 /api 。(^是正则表达式的内容,意思是限定开头)

  • 本地请求 http://localhost:8080/api/zzz/one ->
  • 代理后请求 http://XX.XX.XX.XX:8084/api/zzz/one ->
  • 设置pathRewrite后的请求 http://XX.XX.XX.XX:8084/zzz/one
  • 所以代理完成后真正发送给后端的请求就是 http://XX.XX.XX.XX:8084/zzz/one 啦。

1.统一给请求添加/api方便监测代理 2.统一删去/api发送正确的请求)

  • 注意:小伙伴们可能会看到浏览器中右键检查打开的控制台中,网络->标头->常规,中的请求网址显示的还是 http://XX.XX.XX.XX:8084/api/zzz/one 。
  • 这是因为浏览器的同源策略,经过代理设置的请求发送给后端已经变成 http://XX.XX.XX.XX:8084/zzz/one 没有/api 的形式了,不用被浏览器显示的请求网址干扰。
  • 如果实在不想看到浏览器的请求网址中有api,可以采用方法1。

什么是跨域?

JavaScript同源策略:当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。

不同域之间相互请求资源,就算作“跨域”。

同源策略要求源相同才能正常进行通信,即协议、域名、端口号都完全一致。**同源策略限制:**表单提交、AJAX请求等。

注意:跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。

proxy代理解决跨域

**原理:**浏览器是禁止跨域的,但是服务端不禁止,在本地运行npm run serve等命令时实际上是用node运行了一个服务器,因此proxyTable实际上是将请求发给自己的服务器,再由服务器转发给后台服务器,做了一层代理,因此不会出现跨域问题。

当我们在用本机去找服务器要数据时会产生跨域问题,所以利用vue-cli去开启一个代理服务器。

配置(vue.config.js)

方法一

优点:配置简单、请求资源时直接发给前端(8080)即可

缺点:不能配置多个代理,不能灵活的控制请求是否走代理

当请求了前端不存在的资源时,该请求会转发给服务器(优先匹配前端资源)

 module.exports = {
     devServer: {
             proxy: 'http://localhost:5000',
     }
 }

方法二

优点:可以配置多个代理,且可以灵活的控制请求是否走请求

缺点:配置繁琐,请求资源时必须加前缀

//开启代理服务器(方法二)
    devServer: {
        proxy: {
            //  '/yu'为请求前缀,用于控制是不是走代理,想走代理时就在请求前缀前边加上这个请求前缀
            '/yu': {
                target: 'http://localhost:5000',
                pathRewrite: { "^/yu": "" }, //重写路径  匹配以/yu为开头的路径都变为空字符串 
                ws: true, //用于支持websocket
                changeOrigin: true //用于控制请求头中的host值
            },
            '/demo': {
                target: 'http://localhost:5001',
                pathRewrite: { "^/demo": "" },
                ws: true, //用于支持websocket
                changeOrigin: true //用于控制请求头中的host值
            },
        }
    }

请求时:

请求前缀必须跟着端口号

getStudents() {
      axios.get("http://localhost:8081/yu/students").then(
        (response) => {
          console.log("请求成功了", response.data);
        },
        (error) => {
          console.log("请求失败了", error.message);
        }
      );
    },
    getCars() {
      axios.get("http://localhost:8081/demo/cars").then(
        (response) => {
          console.log("请求成功了", response.data);
        },
        (error) => {
          console.log("请求失败了", error.message);
        }
      );
    },

1.vue-cli 2 是在路径为config/index.js的文件下proxyTable里配置的,该文件是整个项目的主要配置入口

// node自带路径工具.
var path = require('path')
// 分为两种环境,dev和production
module.exports = {
  dev: {
    // 配置好后一定要关闭原来的server,重新npm run dev启动项目。不然无效。
    proxyTable: {   // 需要代理的接口,可以跨域
      // 用‘/api'开头,代理所有请求到目标服务器
      '/api': {
            target: 'http:xxx.com', // 目标接口域名
            changeOrigin: true, // 是否启用跨域
            pathRewrite: { //这里要理解成用'/api'代替target里面的地址,后面的组件中我们调用接口的时候直接用api代替,比如我要调用'http://40.00.100:3002/user/add',直接写成'/api/user/add'即可
              '^/api': ''  // 即/api相当于http://40.00.100:3002
            }
        }
     }
  }
}

注意:‘/api’ 为匹配项,因为在 ajax 的 url 中加了前缀 ‘/api’,而原本的接口是没有这个前缀的,所以需要通过 pathRewrite 来重写地址,将前缀 ‘/api’ 转为 ‘/’。

如果本身的接口地址就有 ‘/api’ 这种通用前缀,就可以把 pathRewrite 删掉。

2.vue-cli 3 是自己在根目录下新建vue.config.js文件,在devServer.proxy对象里配置(当然也有其他方式),配置后会和隐藏的配置自动进行整合

module.exports = {
    // cli3 代理是从指定的target后面开始匹配的,不是任意位置;配置pathRewrite可以做替换
    devServer: {
      proxy: {
        '/yourapi': {   //代理api,/yourapi的意义在于,声明axios中url已/api开头的请求都适用于该规则,注意是以/yourapi开头,即:axios.post({url: '/yourapi/xxx/xxx'})
          target: 'yourserver',   //服务器真实api地址,即需要请求的目标接口,此处target的意义在于:造成跨域是因为访问的host与我们的请求头里的origin不一致,所以我们要设置成一致,这个具体请看下文
          changeOrigin: true,    //是否跨域,true为开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
          ws: true, // 是否启用websockets,根据实际情况看是否需要配置该项
          pathRewrite: { 
               '^/yourapi': 'https://我是服务器/api'   //重写路径
        // 此处是大部分文章都不会明说的的地方,
        // 既然我们设置了代理,则所有请求url都已写成/yourapi/xxx/xxx,那请求如何知道我们到底请求的是哪个服务器的数据呢
        // 因此这里的意义在于, 以 /yourapi开头的url请求,代理都会知道实际上应该请求那里,
        // ‘我是服务器/yourapi',后面的/api根据实际请求地址决定,即我的请求url:/yourapi/test/test,被代理后请求的则是
        // https://我是服务器/yourapi/test/test
          } 
        }
      }
    }
  }

 

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程宝库

 vue动态渲染数据时使用$refs获取dom无法获取问题场景:在循环的列表上绑定了 ref, 想当数据动态渲染完了,然后获取列表,接着就是获取不到了解决办法在请求数据了以后,方法内 ...