江苏龙网

  1. 主页 > 生活百科 > >

分分钟了解跨域的几种处理方法( 二 )

跨域


var xhr = new XMLHttpRequest();// 前端开关：浏览器是否读写cookiexhr.withCredentials = true;// 访问http-proxy-middleware代理服务器xhr.open('get', 'http://www.domain1.com:3000/login?user=admin', true);中间件服务器：
var express = require('express');var proxy = require('http-proxy-middleware');var app = express();app.use('/', proxy({// 代理跨域目标接口target: 'http://www.domain2.com:8080',changeOrigin: true,// 修改响应头信息，实现跨域并允许带cookieonProxyRes: function(proxyRes, req, res) {res.header('Access-Control-Allow-Origin', 'http://www.domain1.com');res.header('Access-Control-Allow-Credentials', 'true');},// 修改响应信息中的cookie域名cookieDomainRewrite: 'www.domain1.com'// 可以为false，表示不修改}));app.listen(3000);console.log('Proxy server is listen at port 3000...');方法四：跨域资源共享（CORS）
普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置 。
目前，所有浏览器都支持该功能(IE8+：IE8/9需要使用XDomainRequest对象来支持CORS）)，CORS也已经成为主流的跨域解决方案 。
Java后台代码示例：
/* * 导入包：import javax.servlet.http.HttpServletResponse; * 接口参数中定义：HttpServletResponse response */// 允许跨域访问的域名：若有端口需写全（协议+域名+端口），若没有端口末尾不用加'/'response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); // 允许前端带认证cookie：启用此项后，上面的域名不能为'*'，必须指定具体的域名，否则浏览器会提示response.setHeader("Access-Control-Allow-Credentials", "true"); // 提示OPTIONS预检时，后端需要设置的两个常用自定义头response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");Nodejs后台代码示例：
var http = require('http');var server = http.createServer();var qs = require('querystring');server.on('request', function(req, res) {var postData = https://www.isolves.com/it/aq/fwq/2019-12-27/'';// 数据块接收中req.addListener('data', function(chunk) {postData += chunk;});// 数据接收完毕req.addListener('end', function() {postData = qs.parse(postData);// 跨域后台设置res.writeHead(200, {'Access-Control-Allow-Credentials': 'true',// 后端允许发送Cookie'Access-Control-Allow-Origin': 'http://www.domain1.com',// 允许访问的域（协议+域名+端口）/** 此处设置的cookie还是domain2的而非domain1，因为后端也不能跨域写cookie(nginx反向代理可以实现)，* 但只要domain2中写入一次cookie认证，后面的跨域接口都能从domain2中获取cookie，从而实现所有的接口都能跨域访问*/'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'// HttpOnly的作用是让js无法读取cookie});res.write(JSON.stringify(postData));res.end();});});server.listen('8080');console.log('Server is running at port 8080...');



推荐阅读


上一篇：RxHttp 让你眼前一亮的Http请求框架

下一篇：冰箱冷藏室结冰是不是冰箱坏了,冰箱冷藏室结冰是冰箱有问题了吗