前端优雅的解决跨域问题

近期在项目中，由于后端重定向两次接口，前端直接拿回响应时间较长，所有在这里做一次跨域。小节一下。

什么是跨域？

跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。

类型	实例
协议跨域	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=>{})

如有错误请指出，共同进步，多多担待。

前端优雅的解决跨域问题

什么是跨域？

常见的解决方式

开发环境跨域

生产环境跨域

猜你喜欢