跨域问题处理（JSONP，CORS,webpack-dev-server,nginx）

本文主要讲解一些跨域的处理，附有部分源码。

JSONP跨域方式

• JSONP跨域原理
  **JSONP **是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback 或者开始就定义一个回调方法，参数给服务端，然后服务端返回数据时会将这个callback 参数作为函数名来包裹住 JSON 数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
  当GET请求从后台页面返回时，可以返回一段JavaScript代码，这段代码会自动执行，可以用来负责调用后台页面中的一个callback函数。
  利用了

<script>
    function callback(data){
        console.log(data);
    }
</script>
<script src="http://localhost:2020/friends?callback=callback"></script>

(2)使用ajax实现jsonp跨域：

<script>
    $.ajax({
        url:'http://localhost:2020/friends?callback=callback',
        method:'get',
        dataType:'jsonp', //=> 执行jsonp请求
        success:(res) => {
            console.log(res);
        }
    })

    function callback(data){
        console.log(data);
    }

</script>

服务端代码：

router.get('/friends', (req, res) => {
  let { callback } = req.query;
  let data = [
      {name:"tom"},
      {name:"jerry"}
  ]
  res.send(`${callback}(${JSON.stringify(data})`)
})

• JSONP跨域的缺点
  JSONP只能解决get请求，不能解决post请求。

CORS 跨域资源共享

这个主要在服务端使用node的时候进行配置。
通过设置响应头配置了CORS跨域。主要设置以下几个属性。

app.all("*",function(req,res,next){
  //设置允许跨域的域名，*代表允许任意域名跨域
  res.header("Access-Control-Allow-Origin","*");
  //允许的header类型
  res.header("Access-Control-Allow-Headers","content-type");
  //跨域允许的请求方式 
  res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
  if (req.method.toLowerCase() == 'options')
     res.send(200); //让options尝试请求快速结束
  else
     next();
});

webpack 中 配置webpack-dev-server

devServer: {
    proxy:{
        '/api':{
            target:'http://localhost:3000',  //请求域名
            changeOrigin: true,  //是否跨域
            pathRewrite:{'/api':''}  
        }
    }
},

解释：服务端接口： http://localhost:8080/api/user
客户端项目跑在：http://localhost:3000 下
这个时候想要请求接口就会存在跨域问题，需要修改webpack中的devServer配置
使用proxy代理，在处理接口为"/api"时，将target设置为后端接口的地址。

如上代码是为了解决：当后端端口为
（1）http://localhost:3000/user
（2）http://localhost:3000/admin
（3）http://localhost:3000/vipUser
这个时候，要使用webpack配置跨域的话devServer中的proxy要检测每个接口的名字修改target，
所以我们可以在前端一律将请求地址修改为
（1）http://localhost:3000/api/user
（2）http://localhost:3000/api/admin
（3）http://localhost:3000/api/vipUser
接下来，我们只需要在proxy中匹配’/api’，最后使用pathRewrite将/api替换为空即可。

使用Nginx进行跨域（Nginx反向代理）

这个时候我们手里只有html、css、js等静态文件，后台接口地址都会访问不到。这个时候Nginx就登场了，Nginx反向代理配置和Webpack大同小异，匹配到动态的地址时将请求转发到一个服务器地址实现跨域。

server {
    listen       3000;    //监听的本地端口
    server_name  localhost;    
                
    location /api {         //匹配到/api开头的接口时，转发到下面的服务器地址
        root   html;  
        proxy_pass  http://192.168.xxx.xxx:8080;    //服务器地址      
    }  
                        
    location =/ {
        root html;
        index  index.htm  index.html;   //默认主页
    }
                        
    # 所有静态请求都由nginx处理，存放目录为html  
    location ~ \.(htm|html|js|css|jpg|png|gif|eot|svg|ttf|woff|woff2)$ {  
        root    html;      //配置静态资源地址
    }    
                
    error_page   500 502 503 504  /50x.html;
        location = /50x.html {
        root   html;
    }
}

which person i love is not my lover!