您的位置:

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应用程序更稳定的运行。