前端跨域解决方案

一、什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

二、为什么会出现跨域

因为浏览器会有同源策略的限制，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。

三、跨域解决方法

1. JSONP

jsonp的原理就是利用script标签没有跨域限制，通过script标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。

<script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
    script.src = 'http://localhost:3001/123?callback=handleCallback';
    document.head.appendChild(script);

    // 回调执行函数
    function handleCallback(res) {
        console.log(res);
    }
 </script>

var express= require('express');
var qs = require('querystring');
var app = express();
app.get('/123',function(req,res){
    var params = qs.parse(req.url.split('?')[1]);
    var fn = params.callback;
    res.status(200)
    // jsonp返回设置
    res.write(fn + '(' + 1111 + ')');
    res.end();
});

//配置服务端口
var server = app.listen(3001, () => {
    console.log('启动服务！');
})

缺点是只支持get请求

2. 跨域资源共享（CORS）

CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。
只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。 // 前端设置是否带cookie xhr.withCredentials = true;

3. nginx代理跨域

nginx代理跨域，实质和CORS跨域原理一样，通过配置文件设置请求响应头Access-Control-Allow-Origin…等字段。

跨域问题：同源策略仅是针对浏览器的安全策略。服务器端调用HTTP接口只是使用HTTP协议，不需要同源策略，也就不存在跨域问题。

4. proxy代理

在开发环境下，由于vue渲染服务和接口代理服务都是webpack-dev-server同一个，所以页面与代理接口之间不再跨域，无须设置headers跨域信息了。

module.exports = {
    dev: {
       proxy: {
       '/api': {
        target: 'http://localhost:8080’,
        pathRewrite: {'^/api' : ''}
    }
}