关于解决浏览器不同域名交互数据的跨域问题(php和vue）

关于解决浏览器不同域名交互数据的跨域问题(php和vue）
方法一：
1.允许所有的域名下的ajax请求，下面2行经测试chrome和360极速浏览器，缺一不可，即第二个参数不能缺少
//header('Access-Control-Allow-Origin:*');
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,content-type');
2.允许某个单独域名下的ajax请求
//header('Access-Control-Allow-Origin:http://www.qiangshangkeji.com');
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,content-type');

3.（有待测试？）允许某个单独域名下的ajax请求，且允许该ajax请求将本地的cookie传递到本服务器，实现登陆效果。注意比如原来的a.com下面的js代码
在a.com有自己的cookie，那么如果a.com中js代码向b.com发起登陆申请，使用cookie，那么a.com和b.com中的cookie是2套不同的cookies，
即相当于2个不同的网站会话，不能相互读取对方的cookies。
//header('Access-Control-Allow-Origin:http://www.qiangshangkeji.com');
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,content-type');
//允许携带cookie
header('Access-Control-Allow-Credentials:true');

跨域资源共享（CORS）
实际上关于同源，只是浏览器在控制，即浏览器a.com下的js代码发送一个ajax请求到b.com，实际上浏览器已经拿到了b.com的返回数据，只是没有交给a.com中的js代码处理，因为cors跨域资源共享的设置。因为浏览器会首先判断来自b.com的响应头的 Access-Control-Allow-Origin头是否允许当前域名a.com获取b.com的数据，如果允许那么就给到a.com的js代码处理。根据浏览器的不同，浏览器还可能判断Access-Control-Allow-Headers这个头是否匹配。也就是说关于跨域问题，实际上是浏览器自身的配置导致的，比如你下载postman客户端，去请求b.com的接口，就没有这个跨域问题。

普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。
需注意的是：由于同源策略的限制，所读取的cookie为跨域请求接口所在域的cookie，而非当前页。如果想实现当前页cookie的写入， 
需啊哟注意，只有当前Access-Control-Allow-Origin的值只有当是非*的时候（即需要是具体的某个或多个域名），此时Access-Control-Allow-Credentials才能被设置为true，否则设置无效。

方法二：（有待实测）使用vue自带的跨域方法，本方法实际上也是nodejs自行实现了一个虚拟代理功能，功能该代理服地址转发请求的方式，只需要
代理服务的地址与当前网站的地址域名同源（协议，域名，端口）即可。

我们在项目根目录，一般也就是package.json文件所在目录，新增一个vue.config.js文件（vue会自动检索有没有该文件），加入代码：
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://co.qiangshangkeji.com', // 配置访问的服务器地址
        pathRewrite: { '^/api': '' },  // 用于将请求中的 /api 字符串替换为空, 然后访问地址就能正确访问，若不添加此行配置，那么访问地址就变成了： http://localhost:5000/api/request_url，这样的请求就会出现 404 *** 作
        ws: true, // 是否支持 webstocket, 默认是 true
        changeOrigin: true // 用于控制请求头中的 host 值, 默认是 ture//开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
      },
      '/api2': {
        target: 'http://localhost:6000', // 配置访问的服务器地址
        pathRewrite: { '^/api2': '' },  // 用于将请求中的 /api2 字符串替换为空, 然后访问地址就能正确访问，若不添加此行配置，那么访问地址就变成了： http://localhost:6000/api/request_url，这样的请求就会出现 404 *** 作
        ws: true, // 是否支持 webstocket, 默认是 true
        changeOrigin: true // 用于控制请求头中的 host 值, 默认是 ture
      }
    }
  }
}