写点什么

前端开发:深入使用 proxy 代理解决跨域问题

用户头像
三掌柜
关注
发布于: 2021 年 03 月 08 日
前端开发:深入使用proxy代理解决跨域问题

在前端领域里面,跨域指的是浏览器允许向服务器发送跨域请求,进而克服 Ajax 只能同源使用的局限性限制。同源策略是一种约定,而且是浏览器中最基本也是最核心的安全功能,若缺少了该策略,浏览器非常容易被攻击;同源就是指“协议+域名+端口”都一样,就算有两个不同域名指向同一个 IP 地址也不能是同源。同源策略只有在浏览器中存在,服务器中确不存在,所以遇到需要跨域请求的地址将其转发服务器后委托服务器去请求即可。

一、实际开发中遇到的跨域问题解决方法

先来举一个简单的例子说明一下:

首先来看一下跨域引起的报错提示:


解决步骤:打开 Vue 项目,然后在项目中找到 config 文件夹里面的 index.js 文件,然后找到 proxyTable,然后添加以下代码段即可:

proxyTable: {

          ['/java/mgr-auth']: {  //替换代理地址名称

            target: 'http://dev-cloud.bc.com/mgr-auth', //代理地址

            changeOrigin: true, //可否跨域

            pathRewrite: {

              ['^/java/mgr-auth']: '', //重写接口,去掉/java/mgr-auth

            }

          }

}


设置完毕之后,重启一下服务,根据实际情况重启项目: npm run serve 或者是 npm run dev。



重启项目之后,在接口封装和调用那里进行设置,最后就可以正常访问接口,跨域问题随之解决。

二、常见的跨域情形

常见的跨域情形通过 URL 链接来区分主要有 6 种:

①同域名,不同端口;②同域名,不同文件或者路径;③同域名,不同协议;④域名和域名对应相同的 IP;⑤主域名相同,子域名不同;⑥不同域名。

三、跨域解决方法汇总

解决跨域问题,一般可以通过三种方式来解决:①前端项目配置代理;②服务端配置跨域访问;③使用 Chrome 的扩展插件。

1、前端项目配置代理的方法解决跨域问题

通过前端项目配置代理的方法解决跨域问题,具体步骤参考文章开头的案例来解决。

2、服务端配置跨域访问的方法解决跨域问题

这个需要在服务端进行配置,具体操作设计后台操作,这里不再具体讲解。

3、通过 Chrome 的扩展插件的方法解决跨域问题

涉及到墙的问题,所以在保证有梯子的情况下搜索使用 Allow CORS: Access-Control-Allow-Origin 即可。

四、代理类型

常见的代理类型大概有四种:①基本代理;②重写路径代理;③支持 HTTPS 的代理;④把请求代理到同一目标的代理。

1、基本代理的实例

module.exports = {

  dev: {

    proxy: {

      '/api': 'http://localhost:8080’

    }

  }

};

2、重写路径代理的实例

module.exports = {

  dev: {

   proxy: {

     '/api': {

       target: 'http://localhost:8080’,

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

     }

   }

 }

};

3、支持 HTTPS 代理的实例

module.exports = {

  dev: {

   proxy: {

     '/api': {

       target: 'https://dev-cloud.cc.com',

       secure: false

     }

   }

 }

};

4、请求代理到同一目标的代理的实例

module.exports = {

  dev: {

   proxy: [{

     context: ['/auth', '/api'],

     target: 'http://localhost:8080’,

   }]

 }

};


以上就是本章全部内容,欢迎关注三掌柜的微信公众号“程序猿 by 三掌柜”,三掌柜的新浪微博“三掌柜 666”,欢迎关注!


发布于: 2021 年 03 月 08 日阅读数: 288
用户头像

三掌柜

关注

某某某技术有限责任公司架构师 2021.02.05 加入

一分耕耘,不一定有一分收获,但十分耕耘,一定会有一分收获!

评论 (3 条评论)

发布
用户头像
不错
2021 年 03 月 11 日 09:42
回复
谢谢支持
2021 年 03 月 11 日 10:36
回复
用户头像
3月日更打卡第一天
2021 年 03 月 08 日 11:13
回复
没有更多了
前端开发:深入使用proxy代理解决跨域问题