同源:URL协议+域名+端口都一致
只要在浏览器打开网页就遵守同源策略
优点:保证用户数据和隐私安全
缺点:前端如果需要访问另一个域名的后端接口,就会被阻止
跨域解决方法:
- JSONP
a站点利用
b站点后端改造js文件将数据通过回调函数传给a站点
a站点通过回调函数拿到b站点数据
- CORS
简单请求:b站点在请求头里添加Access-Control-Allow-Origion://a站点url
(Content-Type 仅支持:application/x-www-form-urlencoded、multipart/form-data、text/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