解决前端开发环境中的的跨域问题

1、为何会有跨越问题
是客户端浏览器同源策略致使的，就是浏览器不容许不一样源的站点相互访问。试想一下要是没有这个，那站点里的安全信息如cookie，帐号/密码等是否是很容易被其它站点获取。
2、解决思路
知道是客户端浏览器为了安全使用同源策略致使的，而服务端是没有这个限制的，那咱们就只能经过服务端进行跨域了。无论是jsonp,core，仍是代理的方式，都是须要服务配合的。哈哈，这也是为啥后端和生产环境下比较少据说跨域的问题，因此这里介绍前端开发环境中的几种解决方法。
3、解决方案
1.彻底交予后端解决，配值请求头信息（core），前端什么都不用作,如express.js中配置以下，其它后端语言配置同理

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",'3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

2.使用nginx反向代理，在配置文件nginx.conf中找到server{}对象，更改项目地址root和配置代理地址proxy_pass，这个方法适合前端静态文件使用：

location / {
    root   D:/browseClient/dist;  #本身的前端项目地址
    index  index.html index.htm;
}
#解决跨域
location /api {                                # 自定义nginx接口前缀
    proxy_pass   http://127.0.0.1:3000;            # 后台api接口地址
            proxy_redirect default;      
    #设置主机头和客户端真实地址，以便服务器获取客户端真实IP
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;   
}

3.若是使用vue-cli搭建的项目，能够直接使用proxyTable模块，项目框架已经集成，找到配置文件在/confif/index.j，以下配置

//代理配置表，在这里能够配置特定的请求代理到对应的API接口
proxyTable:{
    "/adv":{
        target:"http://127.0.0.1:3000",//须要访问的服务器地址
        changeOrigin:true,//true为开启代理
        pathRewrite:{
            '^/adv': '/'//路径的替换规则
        }
    }，
    "/user":{
        target:"http://127.0.0.1:3000",//访问的服务器地址
        changeOrigin:true,//true为开启代理
        pathRewrite:{
            '^/user': '/'//路径的替换规则
        }
    }
}

显然，大部分状况咱们不可能为每一个api接口都在这加一个规则，因此更好的配置是：

proxyTable: {
    '**': {
        target: 'http://127.0.0.1:3000',
        changeOrigin: true,   //容许跨域
    }
}

或者

proxyTable: [{
    context: ['/**']，
    target: 'http://127.0.0.1:3000'，
    changeOrigin: true,  //容许跨域
}]

是否是方便了不少
4.其它，如jsonp是经过接口回调的方式实现跨域，这个如今已经用的少了。window.postMessage() 是HTML5的一个接口，专一实现不一样窗口不一样页面的跨域通信。这些是对单个接口或者页面层面的跨域，使用也简单就不详细说了。