解决浏览器跨域

1、通过jsonp

    该方法中能实现  GET 请求

　url = "http://www.baidu.com?a=1&callback=fun"

　　function fun(result){

           console.log(result);

      }

2、ajax请求，服务器端设置通过cors

接口允许允许跨域请求：
header('Access-Control-Allow-Origin:*'); //支持全域名访问，不安全，部署后需要限制为R.com
header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE'); //支持的http动作
header('Access-Control-Allow-Headers:x-requested-with,content-type'); //响应头 请按照自己需求添加。
前端发起跨域请求：
就是正常的$.ajax请求即可。

3、通过node 中间件设置服务器代理

http-proxy-middleware模块设置代理服务
如果仔细阅读webpack-dev-server的文档，就会发现其实webpack-dev-server的代理方案是引用了http-proxy-middleware模块来设置的。这里要注意的是http-proxy-middleware模块也是运行在nodejs服务，因此前端需要运行一个nodejs服务，这里以express为例子：

var express = require('express');
var proxy = require('http-proxy-middleware');
var app = express();
app.use('/users', proxy({
target: "http://jsonplaceholder.typicode.com",
changeOrigin: true
}));
// 省略各种配置 ... ...
app.listen(..., 9000);

我们就可以在本地端口9000访问到 http://jsonplaceholder.typicode.com/users 的数据，其请求接口和上面一致。其实这段代码跟webpack-dev-server代理很相似的。

4、通过nginx 设置服务器代理

5、通过webpack设置服务器代理

webpack-dev-server配置跨域方案
如果你项目是用webpack作为前端自动化构建工具的话，那么可以引用webpack-dev-server来进行配置跨域方案。webpack-dev-server是一个小型的nodejs服务器，是基于express框架的，用于实时监听和打包编译静态资源。其中里面有一个属性是proxy，是专门来配置代理请求接口的。

举个例子：

比如我现在通过webpack构建了一个本地开发环境，端口号是9000，现在我要在本地去请求(GET) http://jsonplaceholder.typicode.com/users 地址获取数据，如果前端没有设置代理的话，请求会因为跨域请求失败。这时候通过如下配置，就可以正常请求了。

devServer: {
contentBase: __dirname + "/",
port: 9000,
proxy: {
"/users": { //需要代理的路径
target: "http://jsonplaceholder.typicode.com", //需要代理的域名
changeOrigin: true //必须配置为true，才能正确代理
}
}
}

通过如上配置，然后在js里面这样请求就可以成功拿到数据了：

//使用fetch获取ajax请求
fetch('/users') //填写路径即可
.then(function(response) {
return response.json()
}).then(function(json) {
console.log('parsed json', json)
}).catch(function(ex) {
console.log('parsing failed', ex)
})

这是通过webpack-dev-server配置的代理方案，那如果没有webpack-dev-server服务，要如何配置代理方案呢？比如在gulp和fis环境中，要怎么设置nodejs的代理服务。这时候我们就得来追寻下webpack-dev-server代理的实现机制了。