cross domain | 跨域

同源指的是两个 URL 的协议、域名、端口一致，反之，则是跨域。

跨域是浏览器的限制，你用抓包工具抓取接口数据，是可以看到接口已经把数据返回回来了，只是浏览器的限制，你获取不到数据。用postman请求接口能够请求到数据。这些再次印证了跨域是浏览器的限制。

• JSONP
• CORS
  出现的较晚，它是 W3C 标准，属于跨域 AJAX 请求的根本解决方案。支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器。
• Proxy

JSONP

出现的早，兼容性好。只支持 GET 请求，不支持 POST 请求。

1. 前端方法示例：

       function jsonp(req) {
           var script = document.createElement('script');
           var url = req.url + '?callback=' + req.callback.name;
           script.src = url;
           document.getElementsByTagName('head')[0].appendChild(script);
       }
   
       function hello(res){
           alert('hello ' + res.data);
       }
   
       jsonp({
           url : '',
           callback : hello 
       });
   
   

2. 服务器端代码：

       var http = require('http');
       var urllib = require('url');
   
       var port = 8080;
       var data = {'data':'world'};
   
       http.createServer(function(req,res){
           var params = urllib.parse(req.url,true);
           if(params.query.callback){0 
               console.log(params.query.callback);
               // jsonp
               var str = params.query.callback + '(' + JSON.stringify(data) + ')';
               res.end(str);
           } else {
               res.end();
           }
           
       }).listen(port,function(){
           console.log('jsonp server is on');
       });
   

JSONP会出现安全问题

• CSRF攻击
• XSS漏洞
• 服务器被黑，返回一串恶意执行的代码

CORS

CORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应
CORS 实现起来非常方便，只需要增加一些 HTTP 头，让服务器能声明允许的访问来源
只要后端实现了 CORS，就实现了跨域

koa 框架示例

    const Koa = require('koa');
    const app = new Koa();

    app.use(async ctx => {
        ctx.body = 'Hello World';
        ctx.set('Access-Control-Allow-Origin', '*');
    });

    app.listen(3000);

Access-Control-Allow-Origin 设置为 * 其实意义不大，可以说是形同虚设，实际应用中，上线前我们会将 Access-Control-Allow-Origin 值设为我们目标host

Proxy

代理（Proxy）也称网络代理，是一种特殊的网络服务，允许一个（一般为客户端）通过这个服务与另一个网络终端（一般为服务器）进行非直接的连接。一些网关、路由器等网络设备具备网络代理功能。一般认为代理服务有利于保障网络终端的隐私或安全，防止攻击

1. vue-cli 里 vue.config.js 文件配置

   amodule.exports = {
       devServer: {
           host: '127.0.0.1',
           port: 8084,
           open: true,// vue项目启动时自动打开浏览器
           proxy: {
               '/api': { // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
                   target: "http://xxx.xxx.xx.xx:8080", //目标地址，一般是指后台服务器地址
                   changeOrigin: true, //是否跨域
                   pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
                       '^/api': "" 
                   }
               }
           }
       }
   }
   
   // 通过axios发送请求中，配置请求的根路径
   axios.defaults.baseURL = '/api'
   

2. 通过服务端实现代理请求转发
   express 示例：

       var express = require('express');
       const proxy = require('http-proxy-middleware')
       const app = express()
       app.use(express.static(__dirname + '/'))
       app.use('/api', proxy({
           target: 'http://localhost:4000', 
           changeOrigin: false
       }));
       module.exports = app
   
   

3. 配置 nginx 实现代理

       server {
           listen    80;
           # server_name www.josephxia.com;
           location / {
               root  /var/www/html;
               index  index.html index.htm;
               try_files $uri $uri/ /index.html;
           }
           location /api {
               proxy_pass  http://127.0.0.1:3000;
               proxy_redirect   off;
               proxy_set_header  Host       $host;
               proxy_set_header  X-Real-IP     $remote_addr;
               proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
           }
       }