前端面试总结之：js跨域问题

时间  2021-08-13
标签 javascript css html 前端 vue java node jquery webpack nginx 栏目 快乐工作 繁體版
原文   原文链接

金三银四，这会到了招聘的高峰期，最近不少朋友都向我发来了面试题，特此来自我留下笔记和分享，但愿对你们有帮助，有所提高。javascript

什么是跨域？

咱们常常会看到上边相似的报错，Access-Cotrol-Allow-Origin 这是典型的跨域报错。其实咱们一般所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。那什么是同源策略呢？css

什么是同源策略？

浏览器安全的基石是"同源政策"（same-origin policy）。 Netscape 公司引入浏览器。目前，全部浏览器
都实行这个政策。
所谓同源是指"协议+域名+端口"三者相同，即使两个不一样的域名指向同一个ip地址，也非同源。
它是浏览器最核心也最基本的安全功能，若是缺乏了同源策略，浏览器很容易受到XSS、CSFR等攻击。
复制代码

所谓"同源"指的是"三个相同"。
html

协议相同域名相同端口相同复制代码

举例：前端

举例来讲，http://www.a.com:3000/index.html这个网址，协议是http://，域名是www.a.com，端口是3000（咱们常常看的网址没有，是由于默认端口80能够省略）。
vue


常见跨域场景 

URL                                      说明                    是否容许通讯
http://www.a.com/a.js
http://www.a.com/b.js         同一域名，不一样文件或路径           容许,属于同源
http://www.a.com/lab/c.js

http://www.a.com:8000/a.js
http://www.a.com/b.js         同一域名，不一样端口                不容许
 
http://www.a.com/a.js
https://www.a.com/b.js        同一域名，不一样协议                不容许
 
http://www.a.com/a.js
http://192.168.4.12/b.js      域名和域名对应相同ip              不容许
 
http://www.a.com/a.js
http://x.a.com/b.js           主域相同，子域不一样                不容许
http://a.com/c.js
 
http://www.a.com/a.js
http://www.b.com/b.js         不一样域名                         不容许复制代码

  • 同源策略限制如下几种行为：

（1） Cookie、LocalStorage 和 IndexDB 没法读取。（2） DOM 没法得到。（3） AJAX 请求不能发送。复制代码

跨域解决方案

一、 经过jsonp跨域
二、CORS
三、 document.domain + iframe跨域
四、 location.hash + iframe
五、 window.name + iframe跨域
六、 postMessage跨域
七、 nginx代理跨域
八、 nodejs中间件代理跨域
九、 WebSocket协议跨域
复制代码

1.经过jsonp跨域
一般为了减轻web服务器的负载，咱们把js、css，img等静态资源分离到另外一台独立域名的服务器上，在html页面中再经过相应的标签从不一样域名下加载静态资源，而被浏览器容许，基于此原理，咱们能够经过动态建立script，再请求一个带参网址实现跨域通讯。jsonp正是利用这个特性来实现的。 

优缺点：java

  1. JSONP是服务器与客户端跨源通讯的经常使用方法。最大特色就是简单适用，老式浏览器所有支持，服务器改造很是小。
  2. 只能实现get一种请求、不安全 容易遭到xss攻击


例子：如咱们在百度搜索时，会发现百度调用也是经过jsonp来实现的。如我在百度搜索跨域，f12开发模式，Network，中能够发现是经过js来实现以下图，node


那么咱们来模拟调用下这个接口吧。https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/suwd=&json=1&p=3&sid=1460_21119_28205_28131_28266_27245_22159&req=2&bs=%E8%B7%A8%E5%9F%9F&csor=0&cb=jQuery110205514934443247432_1553744466531&_=1553744466532jquery

简化为：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show 以下图也是能够的webpack


<script> 
       function show(params) {
            console.log(params);
        }

 </script>    
<script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show"></script>

复制代码

以下图，可正常调用输出：
nginx

模拟jsonp代码：

function jsonp({url,params,cb}) { 
    return new Promise((resolve, reject) => { 
      let script = document.createElement('script');               
      window[cb] = function (params) {     
               resolve(params); 
      }      
      params = {...params,cb};  
      let arrs = [];  
      for(let key in params){  
          arrs.push(`${key}=${params[key]}`);       
       }                
      script.src = `${url}?${arrs.join('&')}`;   
      document.body.appendChild(script);
            });        }; 
jsonp({  
 url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', 
 params:{wd:'a'},    
 cb:'show'       
 }).then(data=>{            
 console.log('jsonp跨域请求的数据为：',data);   
});复制代码

2.）jquery ajax：

$.ajax({
    url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "show",    // 自定义回调函数名
    data: {wd:'a'}
});
复制代码

3.）vue.js：

this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
    params: {wd:'a'},
  jsonp: 'show'}).then((res) => {
    console.log(res); 
})
复制代码


2.CORS

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）它容许浏览器向跨源服务器，发出 XMLHttpRequest请求，从而克服了AJAX只能 同源使用的限制。

ps：普通跨域请求：只服务端设置Access-Control-Allow-Origin便可，前端无须设置，若要带cookie请求：先后端都须要设置。因为同源策略的限制，所读取的cookie为跨域请求接口所在域的cookie，而非当前页。

优缺点：

  1. 目前，全部浏览器都支持该功能(IE8+：IE8/9须要使用XDomainRequest对象来支持CORS）)，CORS也已经成为主流的跨域解决方案。
  2. 整个CORS通讯过程，都是浏览器自动完成，不须要用户参与。对于开发者来讲，CORS通讯与同源的AJAX通讯没有差异，代码彻底同样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感受。
  3. CORS与JSONP的使用目的相同，可是比JSONP更强大。JSONP只支持GET请求，CORS支持全部类型的HTTP请求。JSONP的优点在于支持老式浏览器，以及能够向不支持CORS的网站请求数据。

两种请求：

浏览器将CORS请求分红两类：简单请求（simple request）和非简单请求（not-so-simple request）。

只要同时知足如下两大条件，就属于简单请求。凡是不一样时知足下面两个条件，就属于非简单请求。

1) 请求方法是如下三种方法之一：HEADGETPOST
（2）HTTP的头信息不超出如下几种字段：
AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type：
只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
复制代码

简单请求：

简单请求，浏览器直接发出CORS请求。具体来讲，就是在头信息之中，增长一个Origin字段。

非简单请求：

是那种对服务器有特殊要求的请求，好比请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。

非简单请求的CORS请求，会在正式通讯以前，增长一次HTTP查询请求，称为"预检"请求（preflight）。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可使用哪些HTTP动词和头信息字段。只有获得确定答复，浏览器才会发出正式的XMLHttpRequest请求，不然就报错。

{ host: 'localhost:4000',
  connection: 'keep-alive',
  'content-length': '0',
  origin: 'http://localhost:3002',
  name: 'lee1',
  'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36',
  accept: '*/*',
  referer: 'http://localhost:3002/2cors.html',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'zh-CN,zh;q=0.9',
  cookie: 'name=lee' }
复制代码

（1）Access-Control-Allow-Origin

该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。

（2）Access-Control-Allow-Credentials

该字段可选。它的值是一个布尔值，表示是否容许发送Cookie。默认状况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie能够包含在请求中，一块儿发给服务器。这个值也只能设为true，若是服务器不要浏览器发送Cookie，删除该字段便可。

（3）Access-Control-Expose-Headers

该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。若是想拿到其余字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader('FooBar')能够返回FooBar字段的值。

withCredentials 属性

CORS请求默认不发送Cookie和HTTP认证信息。若是要把Cookie发到服务器，一方面要服务器赞成，指定Access-Control-Allow-Credentials字段。

Access-Control-Allow-Credentials: true复制代码

开发者必须在AJAX请求中打开withCredentials属性。

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;复制代码

不然，即便服务器赞成发送Cookie，浏览器也不会发送。或者，服务器要求设置Cookie，浏览器也不会处理。

可是，若是省略withCredentials设置，有的浏览器仍是会一块儿发送Cookie。这时，能够显式关闭withCredentials。

xhr.withCredentials = false;
复制代码

须要注意的是，若是要发送Cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其余域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也没法读取服务器域名下的Cookie。

（4）Access-Control-Request-Method

该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是PUT。

（5）Access-Control-Request-Headers

该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段


Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000复制代码

（6）Access-Control-Allow-Methods

该字段必需，它的值是逗号分隔的一个字符串，代表服务器支持的全部跨域请求的方法。注意，返回的是全部支持的方法，而不单是浏览器请求的那个方法。这是为了不屡次"预检"请求。


（7）Access-Control-Allow-Headers

若是浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，代表服务器支持的全部头信息字段，不限于浏览器在"预检"中请求的字段。

（8）Access-Control-Allow-Credentials

该字段与简单请求时的含义相同。

（9）Access-Control-Max-Age

该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即容许缓存该条回应1728000秒（即20天），在此期间，不用发出另外一条预检请求。


模拟：

前端设置js；

a.html页面中的js

let xhr = new XMLHttpRequest;   
 document.cookie = 'name=lee'; //cookie  不能跨域  
  xhr.withCredentials = true; //   
 xhr.open('PUT','http://localhost:4000/getData',true);  
  xhr.setRequestHeader('name', 'lee1');  
  xhr.onreadystatechange = function () {   
     if(xhr.readyState === 4){ 
           if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                console.log(xhr.response);  
          }        }            } 
 xhr.send();复制代码

后端用node模拟：


a.js （ 用于能够http://localhost:3002/a.html来启动页面 调用 http://localhost:4000/getData 属于跨域）

let express = require('express');
let app = express();
app.use(express.static(__dirname));app.listen(3002);复制代码

b.js

let express = require('express');
let app = express();
let whiteList = ['http://localhost:3002'];
app.use(function (req,res,next) { 
   let origin = req.headers.origin; 
   if (whiteList.includes(origin)){        // 设置哪一个源能够访问
        res.setHeader('Access-Control-Allow-Origin', origin);        // 容许携带哪一个头访问我 
        res.setHeader("Access-Control-Allow-Headers", "name,Content-Type,X-Requested-With");
    //    容许携带cookie       
       res.setHeader('Access-Control-Allow-Credentials','true');        // 该次请求的请求方式   
       res.setHeader("Access-Control-Allow-Methods", "PUT");        //预检测存活时间 
       res.setHeader("Access-Control-Max-Age", 1800);        // /容许前端获取哪一个头 
       res.setHeader("Access-Control-Expose-Headers", "name");        // option 预检请求 又是有请求 有时没有 表示这个请求是用来询问的
        if(req.method === 'OPTIONS'){ 
           res.end();  
      }    } 
   next();})
app.put('/getData', function (req, res) {   
 console.log(req.headers);   
 // res.setHeader('name','hello lee');   
 res.end(`getData`);});app.get('/getData',function (req,res) {   
console.log(req.headers);   
 res.end(`getData`);});app.use(express.static(__dirname));
app.listen(4000);复制代码

3.document.domain + iframe跨域

此方案仅限主域相同，子域不一样的跨域应用场景(网页一级域名相同，只是二级域名不一样)。实现原理：两个页面都经过js强制设置document.domain为基础主域，就实现了同域。

1.）父窗口：(www.a.com/a.html)

<iframe id="iframe" src="http://child.a.com/b.html"></iframe>
<script>
    document.domain = 'a.com';
    var user = 'admin';
</script>复制代码

2.）子窗口：(child.a.com/b.html)

<script>
    document.domain = 'a.com';
    // 获取父窗口中变量
    alert('get js data from parent ---> ' + window.parent.user);
</script>复制代码

4. location.hash

实现原理： a与b跨域相互通讯，经过中间页c来实现(且c与a是同域)。 三个页面，不一样域之间利用iframe的location.hash传值，相同域之间直接js访问来通讯。

具体实现：A域：a.html -> B域：b.html -> A域：c.html，a与b不一样域只能经过hash值单向通讯，b与c也不一样域也只能单向通讯，但c与a同域，因此c可经过parent.parent访问a页面全部对象。

1.）a.html：(www.a.com/a.html)

<iframe id="iframe" src="http://www.b.com/b.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');

    // 向b.html传hash值
    setTimeout(function() {
        iframe.src = iframe.src + '#user=admin';
    }, 1000);
    
    // 开放给同域c.html的回调方法
    function onCallback(res) {
        alert('data from c.html ---> ' + res);
    }
</script>复制代码

2.）b.html：(www.b.com/b.html)

<iframe id="iframe" src="http://www.a.com/c.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');

    // 监听a.html传来的hash值，再传给c.html
    window.onhashchange = function () {
        iframe.src = iframe.src + location.hash;
    };
</script>复制代码

3.）c.html：(www.a.com/c.html)

<script>
    // 监听b.html传来的hash值
    window.onhashchange = function () {
        // 再经过操做同域a.html的js回调，将结果传回
        window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));
    };
</script>复制代码

5.window.name + iframe跨域

浏览器窗口有 window.name 属性。这个属性的最大特色是，不管是否同源，只要在同一个窗口里，前一个网页设置了这个属性，后一个网页能够读取它。而且能够支持很是长的 name 值（2MB）。

父窗口先打开一个子窗口，载入一个不一样源的网页，该网页将信息写入window.name属性。

window.name = data;
复制代码

接着，子窗口跳回一个与主窗口同域的网址。

location = 'http://parent.url.com/xxx.html';
复制代码

而后，主窗口就能够读取子窗口的window.name了。

var data = document.getElementById('myFrame').contentWindow.name;
复制代码

这种方法的优势是，window.name容量很大，能够放置很是长的字符串；缺点是必须监听子窗口window.name属性的变化，影响网页性能。

1.）a.html：(www.a.com/a.html)

var proxy = function(url, callback) {
    var state = 0;
    var iframe = document.createElement('iframe');

    // 加载跨域页面
    iframe.src = url;

    // onload事件会触发2次，第1次加载跨域页，并留存数据于window.name
    iframe.onload = function() {
        if (state === 1) {
            // 第2次onload(同域c页)成功后，读取同域window.name中数据
            callback(iframe.contentWindow.name);
            destoryFrame();

        } else if (state === 0) {
            // 第1次onload(跨域页)成功后，切换到同域代理页面
            iframe.contentWindow.location = 'http://www.a.com/c.html';
            state = 1;
        }
    };

    document.body.appendChild(iframe);

    // 获取数据之后销毁这个iframe，释放内存；这也保证了安全（不被其余域frame js访问）
    function destoryFrame() {
        iframe.contentWindow.document.write('');
        iframe.contentWindow.close();
        document.body.removeChild(iframe);
    }
};

// 请求跨域b页面数据
proxy('http://www.b.com/b.html', function(data){
    alert(data);
});复制代码

2.）c.html：(www.a.com/c.html
中间代理页，与a.html同域，内容为空便可。

3.）b.html：(www.b.com/b.html)

<script>
    window.name = 'This is b.html data!';
</script>复制代码

6.postMessage跨域

HTML5为了解决这个问题，引入了一个全新的API：跨文档通讯 API（Cross-document messaging）。

这个API为window对象新增了一个window.postMessage方法，容许跨窗口通讯，不论这两个窗口是否同源。

postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也能够设为 *，表示不限制域名，向全部窗口发送。

它可用于解决如下方面的问题：

a.） 页面和其打开的新窗口的数据传递
b.） 多窗口之间消息传递
c.） 页面与嵌套的iframe消息传递
d.） 上面三个场景的跨域数据传递复制代码

例子，a.js b.js 用node启用两个不一样端口号的接口来模拟本地实现跨域

父窗口 localhost:4001/a.html向子窗口 localhost:4002/b.html发消息，调用 postMessage方法就能够了。父窗口和子窗口均可以经过 message事件，监听对方的消息。


1）a.html

<iframe src="http://localhost:4002/b.html"     frameborder="0" id="frame" onload="load()"    ></iframe>
    <script>       
 function load(params) {
            let frame = document.getElementById('frame');
            frame.contentWindow.postMessage('从a页面向b页面','http://localhost:4002'); 
           window.onmessage = function (e) { //父窗口和子窗口均可以经过message事件，监听对方的消息。
                console.log(e.data, 'a.html');  
          }                   
 }

复制代码

2)b.html

window.onmessage = function (e) { //父窗口和子窗口均可以经过message事件，监听对方的消息。
           console.log(e.data,'b.html');
//子窗口经过event.source属性引用父窗口，而后发送消息。event.origin属性能够过滤不是发给本窗口的消息。 
          e.source.postMessage('从b向a发消息',e.origin);   
    }  

复制代码

3)a.js (运行a.js)

let express = require('express');
let app = express();
app.use(express.static(__dirname));app.listen(4001);复制代码

4）b.js (node b.js)

let express = require('express');
let app = express();
app.use(express.static(__dirname));app.listen(4002);复制代码

message事件的事件对象event，提供如下三个属性。

  • event.source：发送消息的窗口
  • event.origin: 消息发向的网址
  • event.data: 消息内容


  • 7.nginx代理跨域

一、 nginx配置解决iconfont跨域

浏览器跨域访问js、css、img等常规静态资源被同源策略许可，但iconfont字体文件(eot|otf|ttf|woff|svg)例外，此时可在nginx的静态资源服务器中加入如下配置。

location / {
  add_header Access-Control-Allow-Origin *;
}复制代码
二、 nginx反向代理接口跨域

跨域原理： 同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不须要同源策略，也就不存在跨越问题。

实现思路：经过nginx配置一个代理服务器（域名与domain1相同，端口不一样）作跳板机，反向代理访问domain2接口，而且能够顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登陆。

nginx具体配置：

#proxy服务器
server {
    listen       81;
    server_name  www.domain1.com;

    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;

        # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时，可为*
        add_header Access-Control-Allow-Credentials true;
    }
}复制代码

1.) 前端代码示例：

var xhr = new XMLHttpRequest();

// 前端开关：浏览器是否读写cookie
xhr.withCredentials = true;

// 访问nginx中的代理服务器
xhr.open('get', 'http://www.domain1.com:81/?user=admin', true);
xhr.send();复制代码

2.) Nodejs后台示例：

var http = require('http');
var server = http.createServer();
var qs = require('querystring');

server.on('request', function(req, res) {
    var params = qs.parse(req.url.substring(2));

    // 向前台写cookie
    res.writeHead(200, {
        'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'   // HttpOnly:脚本没法读取
    });

    res.write(JSON.stringify(params));
    res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');复制代码

8.WebSocket

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通讯，同时容许跨域通信，是server push技术的一种很好的实现。
WebSocket是一种通讯协议，使用 ws://（非加密）和 wss://（加密）做为协议前缀。该协议不实行同源政策，只要服务器支持，就能够经过它进行跨源通讯。

原生WebSocket API使用起来不太方便，可使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。本此由于是模拟就没有安装了用了WebSocket

下面是一个例子，浏览器发出的WebSocket请求的头信息（摘自维基百科）。

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com
复制代码

上面代码中，有一个字段是Origin，表示该请求的请求源（origin），即发自哪一个域名。

正是由于有了Origin这个字段，因此WebSocket才没有实行同源政策。由于服务器能够根据这个字段，判断是否许可本次通讯。若是该域名在白名单内，服务器就会作出以下回应。

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat复制代码

1.）前端代码：

// 能够用socket.io来兼任    let socket = new WebSocket('ws://localhost:3000')    socket.onopen = function (params) {        socket.send('前端发送信息');    }    socket.onmessage = function (e) {        console.log(e.data);    }复制代码

2.）Nodejs socket后台：须要安装模块ws

let express = require('express');let app = express();let Websocket = require('ws');let wss = new Websocket.Server({port:3000});wss.on('connection',function (ws) {    ws.on('message',function (data) {        console.log(data);        ws.send('从服务端发送websocket信息');    })});复制代码

9. Nodejs中间件代理跨域

node中间件实现跨域代理，原理大体与nginx相同，都是经过启一个代理服务器，实现数据的转发，也能够经过设置cookieDomainRewrite参数修改响应头中cookie中域名，实现当前域的cookie写入，方便接口登陆认证。

一、 非vue框架的跨域（2次跨域）

利用node + express + http-proxy-middleware搭建一个proxy服务器。

1.）前端代码示例：

var xhr = new XMLHttpRequest();

// 前端开关：浏览器是否读写cookie
xhr.withCredentials = true;

// 访问http-proxy-middleware代理服务器
xhr.open('get', 'http://www.domain1.com:3000/login?user=admin', true);
xhr.send();复制代码

2.）中间件服务器：

var express = require('express');
var proxy = require('http-proxy-middleware');
var app = express();

app.use('/', proxy({
    // 代理跨域目标接口
    target: 'http://www.domain2.com:8080',
    changeOrigin: true,

    // 修改响应头信息，实现跨域并容许带cookie
    onProxyRes: 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...');复制代码

3.）Nodejs后台同（六：nginx）

二、 vue框架的跨域（1次跨域）

利用node + webpack + webpack-dev-server代理接口跨域。在开发环境下，因为vue渲染服务和接口代理服务都是webpack-dev-server同一个，因此页面与代理接口之间再也不跨域，无须设置headers跨域信息了。

webpack.config.js部分配置：

module.exports = {
    entry: {},
    module: {},
    ...
    devServer: {
        historyApiFallback: true,
        proxy: [{
            context: '/login',
            target: 'http://www.domain2.com:8080',  // 代理跨域目标接口
            changeOrigin: true,
            secure: false,  // 当代理某些https服务报错时用
            cookieDomainRewrite: 'www.domain1.com'  // 能够为false，表示不修改
        }],
        noInfo: true
    }
}复制代码

本文内容参考网上内容，若有雷同和错误，请与我联系。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程