跨域的处理方式 JSONP和CORS和反向代理

什么是跨域?  首先了解同源策略，三个相同，协议，域名端口号相同就是同源，那么三者有任意不同就会造成跨域。跨域不常见，跨域基本上就是访问别人的资源。
 
如何解决跨域问题？
 
常见的有三种
 
  一：jsonp处理跨域问题。
 
同源策略是浏览器的行为, 和 js 关系不大.
所谓跨域是指请求发起方页面所在的 url 与访问的 api 存在协议, 域名, 端口中任意一个不同即视为跨域. 并不单单是指域名.
也有一些访问是不受同源策略影响的：比如，script标签，img标签，link标签，video标签。
所以可以利用不受同源策略影响的标签来解决跨域问题
后端
 
response.end("aaaa({name: 'quanquan', friend: 'guiling'})");
前端
 
<script>
    // 由于后端返回的内容即将调用函数 aaaa, 那我们就预先定义一个呗, 这东西就叫回调函数
    function aaaa(param) {
        console.log('后端返回的参数是: ', param)
    }
</script>
<script src="http://localhost:8888/"></script>
总结：前段定义一个函数，把函数名通过script标签传给后端，后端拿到函数名然后返回韩顺调用，并且把参数当做参数传递即可。
二 ：CORS(跨域共享资源)
前段
<h3>CORS 实现跨域</h3>
<script>
var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://localhost:8888')
xhr.onreadystatechange = function() { if(xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText) } }
xhr.send()
</script>
 
后端设置hearder即可
后端代码 be/cors/index.js
 
const http = require('http');
 
const PORT = 8888;
 
// 创建一个 http 服务
const server = http.createServer((request, response) => {
response.setHeader('Access-Control-Allow-Origin', '*');
  response.end("{name: 'quanquan', friend: 'guiling'}");
});
 
// 启动服务, 监听端口
server.listen(PORT, () => {
  console.log('服务启动成功, 正在监听: ', PORT);
});

 

链接：https://juejin.im/post/5c0a55e76fb9a049ef2665ba
来源：掘金