先后端分离产生的跨域问题的解决方案之--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头；*/