AJAX跨域

什么叫跨域

跨域细分

跨域解决,一般用php作为代理把要请求的域加载进来

 本地调试可以利用解除浏览器的同源策略

Chrome浏览器 disable-web-security 关闭安全(同源)策略 解决跨域 可方便 本地调试  具体使用方法 先去Chrome浏览器的根目录把他的快捷方式发送一个到桌面 

然后 在 

C盘根目录 或者其他目录建一个文件夹 比如命名为  MyChromeUserData
 
现在 打开这个刚发送到桌面快捷方式的属性 

然后 再

把这个 --disable-web-security 复制到 目标 目录 你打开 目录时候 就会有一个 提示框出现 说明 成功了

(注意--disable-web-security前面有空格后面也有一个空格)

例如这是 

将自定义目录 放在E盘的写法

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=E:\MyChromeUserData
 
这是 放在 C盘 根目录的写法  多了一个这个allow-file-access-from-files(可以加载本地数据) 如果没出问题 可以不用写

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --user-data-dir="C:\MyChromeUserData" --disable-web-security

 cors跨域资源共享

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。
它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。

 和后台配合叫他加上Access-Control-Allow-Headers 看下面对话场景

axios请求 headers里面加参数报这个错的吗,要怎么处理啊
那让后台处理下呀 一行代码的事情吧
是什么代码呀,跟他说过了,他也不清楚
Access
-Control-Allow-Headers 这个了解下
我node写后端,userToken放到header里传到后端,后台需要加上res.header(
'Access-Control-Allow-Headers', 'userToken')

 如果后端设置了且接口可以访问但还是跨域之类出现跨域的提示 那么请设置withCredentials为false  默认是true

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

withCredentials 链接说明
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials

 

posted @ 2017-01-16 15:02  Model-Zachary  阅读(246)  评论(0编辑  收藏  举报