前端跨域学习小结

一、什么是跨域

跨域，指的是浏览器不能执行其他网站的脚本，通过js在不同的域之间进行数据传输或通信。它是由浏览器的同源策略（域名，协议，端口均相同）造成的，是浏览器对JavaScript施加的安全限制。

举个栗子：

http://www.qianqianshijie.com:8080/frame/World

协议：http://

域名：www.qianqianshijie.com

端口号：8080

当协议、域名、端口号有任意一个不同的时候，就算不同的“域”

二、使用跨域的情况

在工作中需要使用AJAX请求其他域名下的请求，可能会出现拒绝访问的情况，这是基于安全的考虑，AJAX只能访问本地的资源，而不能进行跨域请求。

三、跨域的方法

1、代理服务器

在使用浏览器进行AJAX请求的时候，经常会出现跨域的问题，所以我们一般会在本地启动一个代理服务器，拦截前端页面的异步请求，从本地服务器转发到远程服务器，得到response后再返回给前端页面。

举个栗子1：

Nodejs中间件代理跨域，vue.js:通过修改webpack的config/index.js

proxyTable:{

'/api/*':{

target:'http://192.168.1.1:8080/api/',

changeOrigin: true,

pathRewrite: {

'^/api': ''

}

举个栗子2：

nginx反向代理：通过在本地配置一个nginx服务器，转发到公司相应的服务器上

server {

listen 8080; #监听8080端口，可以改成其他端口

server_name localhost; # 当前服务的域名

#charset koi8-r;

#access_log logs/host.access.log main;

location / {

proxy_pass http://localhost:8088;

proxy_redirect default;

}

location /apis { #添加访问目录为/apis的代理配置

rewrite ^/apis/(.*)$ /$1 break;

proxy_pass http://localhost:8090;

}

2、JSONP

Jsonp利用了script标签的src属性是没有跨域的限制的，从而达到跨域访问的目的。因此它的最基本原理就是：动态添加一个标签来实现。

缺点：只能使用get方法，不能使用post方法，没有错误提示

$.ajax({

url:'http://baidu.com',

dataType:'jsonp',

data:'',

jsonp:'callback',

success:function(rpt){

alert('success' + JSON.stringify(rpt));

error:fucntion(error){}

}

})

3、CORS（cross-origin sharing standard）策略

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

前端：

var xhr = new XMLHttpRequest();

xhr.open("GET", "http://www.baidu.com/model", true);

xhr.send();

服务器：

设置Access-Control-Allow-Origin来进行，

在header设置

header（“Access-Control-Allow-Origin:*");

“*”号表示允许任何域向我们的服务端提交请求

4、 WebSocket协议跨域

1.）前端代码：

user input：

var socket = io('http://www.domain2.com:8080');

// 连接成功处理

socket.on('connect', function() {

// 监听服务端消息

socket.on('message', function(msg) {

console.log('data from server: ---> ' + msg);

});

// 监听服务端关闭

socket.on('disconnect', function() {

console.log('Server socket has closed.');

});

document.getElementsByTagName('input')[0].onblur = function() {

socket.send(this.value);

};

2.）Nodejs socket后台：

var http = require('http');

var socket = require('socket.io');

// 启http服务

var server = http.createServer(function(req, res) {

res.writeHead(200, {

'Content-type': 'text/html'

});

res.end();

});

server.listen('8080');

console.log('Server is running at port 8080...');

// 监听socket连接

socket.listen(server).on('connection', function(client) {

// 接收信息

client.on('message', function(msg) {

client.send('hello：' + msg);

console.log('data from client: ---> ' + msg);

});

// 断开处理

client.on('disconnect', function() {

console.log('Client socket has closed.');

});

5、postMessage跨域(XHR2)

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：

1.）页面和其打开的新窗口的数据传递

2.）多窗口之间消息传递

3.）页面与嵌套的iframe消息传递

4.）上面三个场景的跨域数据传递

用法：postMessage(data,origin)方法接受两个参数

data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。

origin：协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

1.）a.html：(http://www.domain1.com/a.html)

var iframe = document.getElementById('iframe');

iframe.onload = function() {

var data = {

name: 'aym'

};

// 向domain2传送跨域数据

iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');

};

// 接受domain2返回数据

window.addEventListener('message', function(e) {

alert('data from domain2 ---> ' + e.data);

}, false);

2.）b.html：(http://www.domain2.com/b.html)

// 接收domain1的数据

window.addEventListener('message', function(e) {

alert('data from domain1 ---> ' + e.data);

var data = JSON.parse(e.data);

if (data) {

data.number = 16;

// 处理后再发回domain1

window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');

}