前端优雅的解决跨域问题
近期在项目中，由于后端重定向两次接口，前端直接拿回响应时间较长，所有在这里做一次跨域。小节一下。
什么是跨域？
跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。
| 类型 | 实例 |
|---|---|
| 协议跨域 | http://www.baidu.com访问https😕/www.baidu.com |
| 端口跨域 | http://www.baidu.com:8080访问https://www.baidu.com:8081 |
| 域名跨域 | http://www.baidu.com访问https😕/web.baidu.com |
常见的解决方式
| 方式 | 理解 | 特点 |
|---|---|---|
| jsonp | 利用 script 标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据。JSONP 请求一定需要对方的服务器做支持才可以。与AJAX对比，都是客户端向服务器端发送请求，从服务器端获取数据的方式。但 AJAX 属于同源策略，JSONP 属于非同源策略（跨域请求） | 简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持 get 方法具有局限性,不安全可能会遭受 XSS 攻击。 |
| cors跨域 | 浏览器会自动进行 CORS 通信，实现 CORS 通信的关键是后端。只要后端实现了 CORS，就实现了跨域。 | 服务端设置 Access-Control-Allow-Origin 就可以开启 CORS. |
| websocket | HTML5 的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案.WebSocket 和 HTTP 都是应用层协议，都基于 TCP 协议。 | 但是 WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据。通常会使用,Socket.io它很好地封装了 webSocket 接口，提供了更简单、灵活的接口 |
| Node 中间件代理 | 同源策略是浏览器需要遵循的标准，而如果是服务器向服务器请求就无需遵循同源策. | 相当与将客户端的请求代理转发 ，然后拿回响应，间接处理跨域 |
开发环境跨域
由于我的项目采用的vue框架，主要讲下vue实现跨域
1.解决方案：proxyTable
我的项目是使用vue脚手架生成的项目，大家可以借鉴我的搭建流程 https://blog.csdn.net/Genius_cxx/article/details/96484202。进入正题，一般情况下项目config目录下面有个index.js文件。部分代码如下
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8088, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
vue cli自带可以设置开发环境跨域 proxyTable属性，我们需要以下配置
proxyTable: {
'/api': {
target: 'http://www.baidu.com',//需要跨域的域名
changeOrigin: true,//是否允许跨越
pathRewrite: {
'^/api': '/api',//重写，在任意页面直接调用 /api+url即可,
}
}
},
由于我下载axios并添加到了vue原型中，调用如下
this.$axios({
url:'/api/admin/list',// 此处“/admin/list”为我url接口
nethod:'get'
}).then(res=>){
console.log(res)
}.catch(err=>{
})
2.解决方案：jsonp
生产环境和开发环境都适用
首先下载引入
//第一步
npm install vue-jsonp -s
//第二步在main.js中引入vue-jsonp
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)
任意页面调用
this.$jsonp('http://www.baidu.com/admin/list',params)
.then(res=>{})
.catch(err=>{})
需要注意这里需要和后端协商callback，统一回调函数名
生产环境跨域
推荐 ngnix反向代理跨域
在这里我只推荐ngnix，简单方便无需任何其他花里胡哨的。
当我们打包上线时配置ngnix如下：
server {
listen 80; #监听80端口，可以改成其他端口
server_name localhost; # 当前服务的域名
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://localhost:80;
proxy_redirect default;
}
location /apis { #添加访问目录为/apis的代理配置
rewrite ^/apis/(.*)$ /$1 break;
proxy_pass http://localhost:82;
}
在我们的开发页面只需要正常封装api，调用跨域接口时将域名改为，部署线上的域名即可，举例
//若 你将项目上线至http://abc.com
//那么你发送的请求如下
this.$axios({
url:'http://abc.com/admin/list',
nethod:'get'
}).then(res=>{})
.catch(err=>{})
如有错误请指出，共同进步，多多担待。
