跨域问题处理（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!