前后端分离产生的跨域问题的解决方案之--jsonp、nginx代理、设置头信息等

前言

在前后端没有分离的时候，前端开发要么是写静态页面，数据渲染后端来做，要么就是前端的页面和后端的代码刚开始的时候就合并在一起，每次后端代码更新了之后，前端也要更新一下代码，然后重启一下服务，还是比较麻烦的，而且前端要一直依赖于后端来开发。但前后端分离之后就不一样了，前端有更大的自由发挥性，现在应该绝大部分的公司都已经采取这种开发模式了。
前后端分离开发之后前后端只要定好接口文档，然后就根据文档各自开始开发了，在接口没好之前前端也可以使用模拟数据的插件来做接口数据模拟返回，等到后端接口写好之后再进行联调就好了，这样子又为开发大大的节约了时间。
前后端为我们带来那么大的便利，但也有它随之而来的缺点，那就是在项目开发时去请求同事的服务，由于浏览器同源策略的影响，就会出现跨域问题而无法收到后端接口返回的数据。

那么何种情况下算跨域了呢？

• 对比网址 http://baidu.com/a.html

  • http://www.qq.com/a.html ----- 域名不同
  • http://www.baidu.com:8080/a.html ----- 端口不同
  • http://baike.baidu.com/a.html ----- 子域不同
  • https://baidu.com/a.html ----- 协议不同

跨域之后会造成

我们使用ajax去请求资源的时候，就会被使用同源策略进行检测，注意：同源策略是适用于浏览器的，也就是说如果我们发送了一个跨域的请求，服务器是能接收到请求的，也会把请求的数据返回给你，但浏览器在接收数据之后，会比较他们的域是否相同，如果不相同拒绝接收处理。

解决方案

1:后端代理
1.1 vue里的后端代理
在config文件下的index.js文件下配置：

proxyTable: {
    'api':{//将'http://www.test.com:8001/'映射为'api'
        target:'http://www.test.com:8001/',// 接口域名
        changeOrigin: true,//是否跨域
        pathRewrite: {
            '^/apis': ''   //需要rewrite的,
        } 
    },
}

1.1 nginx代理
找到nginx里conf下的配置文件nginx.conf，进行以下的修改

server {
    listen       80; #监听80端口，可以改成其他端口
    server_name  127.0.0.1; # 当前服务的域名

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location ^~/ {
        proxy_pass http://127.0.0.1:4302; #页面访问地址
        proxy_set_header X-real-ip $remote_addr;
        proxy_set_header Host $http_host;
    }

    location ^~/hs {
        proxy_pass http://10.65.7.114:8180/hs; #实际请求的接口配置
        proxy_set_header X-real-ip $remote_addr;
        proxy_set_header Host $http_host;
    }
}

注：在location里面配置页面的访问地址和要请求的接口地址。

2:jsonp请求
原理：我们会发现我们用script来引入文件的时候，地址不受同源策略的影响
2.1原生js解决跨域

<script>
    function callback(res){
        console.log(res.name);
    }
</script>
<script src="http://www.baidu.com/api.do?callback=callback"></script>

2.2用juery封装好的jsnop请求来解决跨域

$.ajax({
    url: "http://www.baidu.com/api.do",
    type: "GET",
    dataType: "jsonp", //指定服务器返回的数据类型
    success: function (res) {
       console.log(res);
    }
});

jsonp请求的缺点就是它只能发送get请求，有上传文件之类的需求就不适合用。

3：设置头信息方案
js 端的ajax请求：

$.ajax({
    url:'http://test.html',
    dataType:'json',
    type:'GET',
    beforeSend:function(xhr){
        xhr.setRequestHeader('Test','testheadervalue');
    },
    async: false,
    cache: false,
    success: function (res) {}
})

服务端设置：

HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");

/**表示的是访问服务端的ip地址及端口号，设置为*表示所有域都可以通过,一般来说不设置*,因为安全性能差，所以改成*/--->HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "http://10.80.6.111:8080");

HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS,DELETE,PUT");

/**表示的是允许跨域的请求方法；*/

HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Test");

/**表示的是允许跨域请求包含content-type头；*/