关于前端:前端开发深入使用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”，欢送关注！