跨域的产生和解决方式
1.跨域的产生，
浏览器为了保证用户信息的安全，防止恶意的网站窃取数据，所以所有浏览器都实行同源政策，而同源所指的是协议相同、域名相同和端口不同，而产生跨域就是因为同源问题，当其中一个不同时，就导致跨域的产生
2.jsonp跨域
jsonp是服务器与客户端跨源通信的常用方法，特点是简单适用，老式浏览器全部支持，而服务器改造小
它的基本思想是：网页通过添加一个 <script> 元素，向服务器请求JSON数据，这种做法不受同源政策限制。服务器收到请求后，将数据放在一个指定名字的回到函数里传回来。首先，网页动态插入<script> 元素，由它向跨源网址发出请求。代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
//动态插入script 标签
var script = document.createElement('script')
script.type = 'text/javascript'
script.src = "http://localhost:8080/login?user=admin&callback=handleCallback"
document.head.appendChild(script)
function handleCallback(res) {//回调函数
console.log(JSON.stringify(res))
}
</script>
</body>
</html>
//后台node代码
var http=require('http')
var qs=require('querystring')
var server=http.createServer()
server.on('request',function(req,res){
var params=qs.parse(req.url.split('?')[1]) //获取URL的参数
var fn=params.callback //获取handleCallback
//jsonp返回设置
console.log(fn+'('+JSON.stringify(params)+')')
res.writeHead(200,{'Content-Type':'text/javascript'})
res.write(fn+'('+JSON.stringify(params)+')') //调用handleCallback 函数并传入参数
res.end()
})
server.listen('8080')
console.log('Server is running at port 8080')
3.后台直接设置
在后台配置文件，插入如下代码。如node项目的app.js 文件
//实现跨域
app.use((req,res,next)=>{
res.header("Access-Control-Allow-Credentials", "true");
// res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
if (req.method == 'OPTIONS') {
res.send(200); /*让options请求快速返回*/
} else {
next();
}
})
4.CORS跨域资源共享
参考阮一峰老师的文章 http://www.ruanyifeng.com/blog/2016/04/cors.html
5.代理跨域
如webpack 的proxy 代理实现跨域 参考下面的代码
dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: 'http://www.abc.com', //目标接口域名 changeOrigin: true, //是否跨域 pathRewrite: { '^/api': '/api' //重写接口 } }, cssSourceMap: false }
