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

2023年1月5日 810点热度 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 或者 赋值为空字符串

<code class="has-numbering">axios.defaults.baseURL = '';
</code>

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

<code class="has-numbering">  axios({
      ...
      url:'/allin/policy/getProductInfo',
      ...
  })
</code>

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

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

相当于遇见 /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 或者 赋值为空字符串

<code class="has-numbering">axios.defaults.baseURL = '';
</code>

请求的url地址为 /allin/getProductInfo

<code class="has-numbering">  axios({
      ...
      url:'/allin/getProductInfo',
      ...
  })
</code>

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

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

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

第三种代理方式

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

<code class="has-numbering">axios.defaults.baseURL = '';
</code>

请求的url地址为 /allin/getProductInfo

<code class="has-numbering">  axios({
      ...
      url:'/allin/getProductInfo',
      ...
  })
</code>

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

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

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

第四种代理方式(统一代理(推荐))

支付 ¥4.99 购买本节后解锁剩余36%的内容

小小调酒师

此刻打盹,你将做梦; 此刻学习,你将圆梦。 个人邮箱:shellways@foxmail.com

文章评论