ajax跨域请求以及传递cookie

声明： 本文章是自己在开发过程遇到问题的经验总结以及结合其他文章的解决思路。

一、ajax跨域访问

什么是跨域？

这是因为浏览器的同源策略会导致跨域，只要协议，域名，端口有任何一个不同，都被当作是不同的域，之间的请求便为跨域操作。跨域访问一般是被阻止的，因为在安全上有个规则：同源策略要求客户端和服务端都必须在一个域内才能通信。比如网站A为a.test.com，网站B为b.test.com。按照上面所说，这两个网站属于不同域。所谓同源也就是网站A和网站B必须是相同的域名。

二、跨域解决方案

1.jsonp实现跨域

基于JSONP的实现原理,所以JSONP只能是“GET”请求,不能进行较为复杂的POST和其它请求,所以遇到那种情况,就得参考下面的CORS解决跨域了(所以如今它也基本被淘汰了)

(1)type改成了get，JSONP只支持get请求，这个参数在JSONP场景下其实是可以忽略的，即使改成post，也会依然按get模式；

(2)dataType改成了jsonp，这个参数标明要采用JSONP方式进行调用；

(3)jsonp: “x5callback”，这个参数其实是一个约定的参数名，用于后端按照这个参数名获取一个回调函数名；

(4)jsonpCallback：这个参数用来指定上面那个参数对应的回调函数名，如果不指定，jQuery会自动生成一个随机的函数名。

2. CORS（Cross-Origin Resource Sharing）方案。

这个方案是比较简单的，只需要在服务端返回的头部信息中增加：（这里以PHP为例）

PHP
//指定允许所有域名访问
header('Access-Control-Allow-Origin:*');
//指定允许指定域名访问
header('Access-Control-Allow-Origin:http://www.xxx.com');



Node
//在相应添加这两条配置
res.header('Access-Control-Allow-Origin', '*');

app.all('*', function (req, res, next) {
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    res.header('Access-Control-Allow-Methods', 'POST,GET');
    res.header('Content-Type', 'application/json;charset=utf-8');
    next();
});

3.代理请求方式

这里我也不是很熟悉，有兴趣的朋友上网自学。

 三、ajax跨域传递cookie

前端ajax请求设置如下：

   $.ajax({ 
          url:_url,
          type:"post",
          data:"",
          dataType:"json",
          //实现跨域请求cookie
          xhrFields: {
            withCredentials: true
           },
           crossDomain: true,
      }

服务端设置如下： (这里以PHP为例）

PHP例子
 //允许跨域传递cookie
header('Access-Control-Allow-Credentials:true');
//这里需要注意必须设置为指定访问的域名
header('Access-Control-Allow-Origin:http://www.xxx.com');
//如果设置为所有域名都可访问，则会报错
header('Access-Control-Allow-Origin:*');
//最终配置
header('Access-Control-Allow-Origin:http://www.xxx.com');
header('Access-Control-Allow-Credentials:true');


Node例子
//允许跨域传递cookie
res.header('Access-Control-Allow-Credentials', true);
//这里需要注意必须设置为指定访问的域名
res.header('Access-Control-Allow-Origin', 'http://www.xxx.com');
//如果设置为所有域名都可访问，则会报错
    res.header('Access-Control-Allow-Origin', '*');
//最终配置
app.all('*', function (req, res, next) {
    res.header('Access-Control-Allow-Origin', 'http://www.xxx.com');
    //Access-Control-Allow-Headers ,可根据浏览器的F12查看,把对应的粘贴在这里就行
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    res.header('Access-Control-Allow-Methods', 'POST,GET');
    res.header('Access-Control-Allow-Credentials', true);
    res.header('Content-Type', 'application/json;charset=utf-8');
    next();
});

对应客户端的 xhrFields.withCredentials: true 参数，服务器端通过在响应 header 中设置 Access-Control-Allow-Credentials = true 来运行客户端携带证书式访问。通过对 Credentials 参数的设置，就可以保持跨域 Ajax 时的 Cookie。这里需要注意的是：

服务器端 Access-Control-Allow-Credentials = true时，参数Access-Control-Allow-Origin 的值不能为 '*' 。

 这里顺便说一下cookie作用域问题。

domain表示的是cookie所在的域，默认为请求的地址如网址为www.jb51.net/test/test.aspx，那么domain默认为www.jb51.net。而跨域访问，如域A为t1.test.com，域B为t2.test.com，那么在域A生产一个令域A和域B都能访问的cookie就要将该cookie的domain设置为.test.com；如果要在域A生产一个令域A不能访问而域B能访问的cookie就要将该cookie的domain设置为t2.test.com。设置是放在ajax请求的位置，加上：

//这里t1.test.com能够访问t2.test.com，进行cookie传递。
//t1.test.com不能访问t2.lin.com
docuemnt.cookie = 'domain=test.com';

主机名是指同一个域下的不同主机，例如：www.google.com和gmail.google.com就是两个不同的主机名。默认情况下，一个主机中创建的cookie在另一个主机下是不能被访问的，但可以通过domain参数来实现对其的控制，其语法格式为：

document.cookie="name=value; domain=cookieDomain";

以google为例，要实现跨主机访问，可以写为：

document.cookie="name=value;domain=.google.com";

这样，所有google.com下的主机都可以访问该cookie。

 四、vue项目配置跨域

在vue项目根目录下config/index.js
//找到dev配置项，直接添加
dev: {
    proxyTable: {
        '/user': {
          target: 'http://localhost:3000/',
          changeOrigin: true,
          pathRewrite: {
            "^/user": '/user'
          }
        }
    }
项目启动端口是8080,请求域名本来是：http://localhost:8080/user，会重定向为http://localhost:3000/user
pathRewrite配置项的作用是，将一切/user/xxx等任何请求重定向，同时前端请求地址不用加上主机名，直接/user/xxx就可以。

 

关于cookie: https://www.cnblogs.com/Jackie-sky/p/3672544.html

cookie跨域：https://blog.csdn.net/qq_21956483/article/details/78720252