关于解决浏览器不同域名交互数据的跨域问题(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

}

}

}

}

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,961评论 5 473
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,444评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,009评论 0 333
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,082评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,101评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,271评论 1 278
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,738评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,395评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,539评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,434评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,481评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,160评论 3 317
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,749评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,816评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,038评论 1 256
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,548评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,140评论 2 341

推荐阅读更多精彩内容