跨域请求(资源)十一种请求方式
一、什么是跨域请求
由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。具体可以查看下表：
二、解决跨域方法
1、JSONP
1) JSONP原理
利用
4、websocket
1) Websocket 原理
Websocket是HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。WebSocket和HTTP都是应用层协议，都基于 TCP 协议。但是 WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时，WebSocket 在建立连接时需要借助 HTTP 协议，连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。
2) 代码演示
// socket.html
5、Node中间件代理
1) Node中间件代理原理
同源策略是浏览器需要遵循的标准，而如果是服务器向服务器请求就无需遵循同源策略。
2) 代码演示
// index.html(http://127.0.0.1:5500)
6、nginx反向代理
1) nginx反向代理原理
实现原理类似于Node中间件代理，需要你搭建一个中转nginx服务器，用于转发请求。
使用nginx反向代理实现跨域，是最简单的跨域方式。只需要修改nginx的配置即可解决跨域问题，支持所有浏览器，支持session，不需要修改任何代码，并且不会影响服务器性能。
2) 代码演示
// proxy服务器
server {
listen 80;
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;
}
}
7、window.name+iframe
1) window.name+iframe原理
window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB），通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。
2) 代码演示
// a.html(http://localhost:3000/b.html)
8、location.hash + iframe
1) location.hash + iframe原理
a.html欲与c.html跨域相互通信，通过中间页b.html来实现。 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。
2) 代码演示
// a.html
// b.html
// c.html
console.log(location.hash);
let iframe = document.createElement('iframe');
iframe.src = 'http://localhost:3000/b.html#idontloveyou';
document.body.appendChild(iframe);
9、document.domain + iframe
1) document.domain + iframe原理
两个页面都通过js强制设置document.domain为基础主域，就实现了同域。
2) 代码演示
// a.html
helloa
// b.html
hellob
10、xdr
1) xdr原理
这是IE8、IE9提供的一种跨域解决方案，功能较弱只支持get跟post请求，而且对于协议不同的跨域是无能为力的，比如在http协议下发送https请求。
2) 代码演示
XDomainRequest
11、proxy代理
1) proxy代理原理
这种方式首先将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。
注意:对于同一请求浏览器通常会从缓存中读取数据，我们有时候不想从缓存中读取，所以会加一个preventCache参数，这个时候请求url变成：url?preventCache=12345567…;这本身没有什么问题，问题出在当使用某些前端框架（比如jquery）发送proxy代理请求时，请求url为proxy?url，同时设置preventCache：true，框架不能正确处理这个参数，结果发出去的请求变成proxy?url&preventCache=123456（正长应为proxy?url?preventCache=12356）;后端截取后发送的请求为url&preventCache=123456，根本没有这个地址，所以你得不到正确结果。
2) 代码演示
React框架
const port = 8081
const url = 'http://localhost:' + port
const host = process.env.DEV_SERVER_HOST || 'localhost'
module.exports = {
init: function () {
return {
port,
hot: true,
publicPath: '/asseted/',
proxy: {
'/v2/**/*': {
target: `http://127.0.0.1:8080/`,
secure: false
}
},
historyApiFallback: {
rewrites: [
{
from: /./,
to: '/asseted/index.html'
},
]
},
// disableHostCheck: true
}
},
port,
host,
url
}
Vue框架
const express = require('express');
const proxy = require("http-proxy-middleware");
const app = express();
/*接口代理*/
app.use('/api/**',
proxy({
target: 'http://127.0.0.1:9180/',
changeOrigin: true,
pathRewrite: {"/api": ""} // 地址重写
})
);
/*加载静态资源*/
app.use(express.static('src'));
/*路由处理*/
app.get("/", (req, res) => {
res.sendfile("./index.html");
});
app.get("/chat", (req, res) => {
res.sendfile("./chat.html");
});
app.get("/table", (req, res) => {
res.sendfile("./table.html");
});
/*接口监听*/
app.listen(8000, () => {
console.log("项目启动与：http://localhost:8000");
});
参考: https://www.cnblogs.com/dojo-lzz/p/4265637.html
参考：http://web.jobbole.com/95654/