同源策略和跨域

84 阅读1分钟

同源:URL协议+域名+端口都一致

只要在浏览器打开网页就遵守同源策略

优点:保证用户数据和隐私安全

缺点:前端如果需要访问另一个域名的后端接口,就会被阻止

跨域解决方法:

  • JSONP

a站点利用

b站点后端改造js文件将数据通过回调函数传给a站点

a站点通过回调函数拿到b站点数据

  • CORS

简单请求:b站点在请求头里添加Access-Control-Allow-Origion://a站点url

(Content-Type 仅支持:application/x-www-form-urlencodedmultipart/form-datatext/plain

复杂请求(如Patch、Content-Type:application/json):

需要先响应Options预检请求,并添加响应头

Access-Control-Allow-Origion: 表示允许的来源
Access-Control-Allow-methods:表示允许的请求方法
Access-Control-Allow-Headers:Content-Type 表示允许的请求头
Access-Control-Allow-Credentials 表示允许携带认证信息

如果需要附带身份信息,JS 中需要在 AJAX 里设置 xhr.withCredentials = true