打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

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

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

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
2017年10月超实用前端干货大合集
PHP解决跨域问题,加入header头
Python学习教程:Python的cors跨域模块主要做了什么?
php服务器端解决跨域问题
为 RESTful API 配置 CORS 实现跨域请求
H5 手机 App 开发入门:概念篇
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服