Express跨域详解

一、什么是跨域

跨域，指的是不同网站间相互调用资源的限制。若在同个域名下，则互相调用没有问题，但在不同域名的情况下，由于浏览器的同源策略，JS脚本只能在同源(协议+域名+端口)环境中被访问。否则会出现跨域问题，会阻碍Web应用程序的正常运行。

例如，我们想从一个名为A的域名的网站中向B域名的服务器发出请求，则会被禁止。这是因为在 web 安全策略中，跨域访问是一个禁止的行为。用常用一个比喻解释跨域：一个人在A城可以自由出入，但去B城却需要B城的城门守卫放行。

二、跨域解决方案

1. JSONP

JSONP (JSON with Padding)，是一种跨域请求的解决方案。JSONP 的主要思想，是利用 script 标签的 src 属性不受浏览器同源策略限制的特点，通过向不同域名下的服务器请求资源，在返回数据的同时，使用特殊的语法，将数据 “包裹”在传入回调函数的形参中，从而实现跨域请求。但JSONP不能进行POST请求。

// 客户端请求
$.$.ajax({
    url: 'http://www.someurl.com/somepath',
    type: 'get',
    dataType: 'jsonp',
    jsonpCallback: 'callback',
    data: {},
    success: function (res) {
        console.log(res)
    }
})

// 服务端返回数据格式
callback({a:1, b:2})

2. CORS

CORS(Cross-Origin Resource Sharing)，是一种跨域访问的解决方案。在服务端，可以通过设置响应头来实现允许跨域访问。通过在响应头中添加特定的头部信息，告诉浏览器：该服务器允许访问当前站点的数据。同时，浏览器也会进行判断，只有当服务器设置了允许跨域访问的 Origin 域名和请求发起的域名匹配时，才会顺利执行请求并返回数据。

// 服务端设置响应头
app.use(function(req,res,next){
    res.header("Access-Control-Allow-Origin","*")
    res.header("Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept")
    next()
})

3. 代理

代理，就是将请求从客户端发送给自己的服务器，然后由服务器代为转发请求并返回数据给客户端。当我们需要向一个跨域的 API 服务器进行数据请求时，就可以通过本地服务器进行转发，也就是发送请求的地址改成本地的服务器地址，本地服务器再将请求转发到 API 服务器。这样就可以避免浏览器的同源策略，解决了跨域问题。

4. window.postMessage

window.postMessage允许跨窗口通信，即在一个窗口发送消息，另一个窗口接收消息。当然，这个window必须来自不同的域名。可以在窗口传入数据（无论类型还是大小），即从域发送到另一个域的数据，并安全地传递全局对象比如window对象。

// 父级窗口发送消息
var popup = window.open('http://localhost:4000/#/login')
popup.postMessage('hello', 'http://localhost:3000')
// 子级窗口响应
window.onmessage = function(e) {
    if(e.origin === 'http://localhost:3000') {
        console.log(e)
    }
}

三、Express解决跨域

Express 框架也提供了跨域的解决方案，可以通过中间件解决跨域问题。

1. CORS中间件

// 配置跨域中间件
var express = require('express');
var cors = require('cors'); //引入中间件cors
var app = express();
app.use(cors()); // 必须在路由前使用

2. 自定义中间件

// 跨域中间件
var express = require('express')
var app = express()
app.use('*', function(req,res,next){
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    res.header('Access-Control-Allow-Methods','PUT,POST,GET,DELETE,OPTIONS');
    next();
})

3. proxy代理

// 代理访问中间件
var proxyMiddleware = require('http-proxy-middleware')
app.use('/api',proxyMiddleware({
    target: 'http://localhost:3000',
    changeOrigin: true,
    pathRewrite: {
    '^/api': '/api' //实际url重写规则,将/api重写为/api
    }
}))

通过以上介绍，相信大家都能对跨域有了更深刻的了解。根据业务需求和实际情况选择合适的方案，合理解决跨域问题可以提高开发效率，减少因为跨域问题而耗费的时间和精力，以及使Web应用程序更稳定的运行。

原创文章，作者：ZHGFP，如若转载，请注明出处：https://www.506064.com/n/333429.html