一、什么是跨域
跨域,指的是不同网站间相互调用资源的限制。若在同个域名下,则互相调用没有问题,但在不同域名的情况下,由于浏览器的同源策略,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应用程序更稳定的运行。