vue前后端分离项目，跨域请求devServer代理配置详解

2023年1月5日 134点热度 0人点赞 0条评论

概念

什么是同源策略

同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
所谓同源是指：协议、域名、端口都相同

什么是跨域
跨域就是不同源，就是不满足协议、域名、端口都相同的约定
如：看下面的链接是否与 http://www.test.com/index.html 同源？

http://www.test.com/dir/login.html 同源
https://www.test.com/index.html 不同源协议不同(https)
http://www.test.com:90/index.html 不同源端口不同(90)
http://www.demo.com/index.html 不同源域名不同(demo)

当协议、域名、端口中任意一个不相同时，就是不同源。若不同源之间相互请求资源，就算作跨域

跨域请求devServer代理几种配置

1：先在项目的根目录下新建 vue.config.js 文件
2：在module.exports内设置devServer来处理代理

假设我们要把http://localhost:8081/allin/policy/getProductInfo 中的域名换成 www.test.com 相当于把请求换成 http://www.test.com/allin/policy/getProductInfo

第一种代理方式

不设置 axios 的 baseURL 或者赋值为空字符串

axios.defaults.baseURL = '';

请求的url地址为 /allin/policy/getProductInfo

  axios({
      ...
      url:'/allin/policy/getProductInfo',
      ...
  })

注意
请求的地址必须是包含 /allin ，但一定要注意 axios的baseURL 的配置，baseURL的配置会添加到每一个请求的 url 前面（下面的几种方式也是同样的）

 devServer: {
    proxy: {
        '/allin': {
            //要访问的跨域的域名
            target: 'http://www.test.com',
            ws: true, // 是否启用websockets
            secure:false, // 使用的是http协议则设置为false，https协议则设置为true
    	    //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样客户端端和服务端进行数据的交互就不会有跨域问题
            changOrigin: true,
        }
    }
}

相当于遇见 /allin 才做代理，则会把默认域名http://localhost:8081地址改成 target 对应的http://www.test.com地址，但是在浏览器的F12下，Network->Headers中看到还是http://localhost:8081/allin/policy/getProductInfo，但是真正的请求的地址则是http://www.test.com/allin/policy/getProductInfo

注意
如果只是修改域名，则不需要写pathRewrite，但如果要写，则必须写成pathRewrite: {’^/allin’: ‘/allin’}，相当于把/allin标识还替换成/allin

第二种代理方式

不设置 axios 的 baseURL 或者赋值为空字符串

axios.defaults.baseURL = '';

请求的url地址为 /allin/getProductInfo

  axios({
      ...
      url:'/allin/getProductInfo',
      ...
  })

注意
这里请求时我没有写/polic，目的是在拦截跨域时我在 pathRewrite 上加上

devServer: {
    proxy: {
        '/allin': {
            //要访问的跨域的api的域名
            target: 'http://www.test.com',
            ws: true,
            secure:false, // 使用的是http协议则设置为false，https协议则设置为true
            changOrigin: true,
            pathRewrite: {
                '^/allin': '/allin/policy'
            }
        }
    }
}

相当于请求遇见 /allin 则替换成 /allin/policy，注意/policy后边没有/，这样拼接成功才会是http://www.test.com/allin/policy/getProductInfo

第三种代理方式

不设置 axios 的 baseURL 或者赋值为空字符串

axios.defaults.baseURL = '';

请求的url地址为 /allin/getProductInfo

  axios({
      ...
      url:'/allin/getProductInfo',
      ...
  })

注意
这里请求时我也没有写/polic，目的是在拦截跨域时我在 target 上加上

devServer: {
     proxy: {
         '/allin': {
             //要访问的跨域的api的域名
             target: 'http://www.test.com/allin/policy',
             ws: true,
             secure:false, // 使用的是http协议则设置为false，https协议则设置为true
             changOrigin: true,
             pathRewrite: {
                 '^/allin': '/'  //必须这样写
             }
         }
     }
 }

这里必须要写pathRewrite: { ‘^/allin’: ‘/’}，而且里边必须要写成’^/allin’: ‘/’，这里的斜杠代表的意思就是使用target中的/allin/policy，否则就要使用第二种代理方式配置，如果不写pathRewrite则请求不会成功。