脚本宝典收集整理的这篇文章主要介绍了同源策略和跨域解决方案，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

什么是同源策略

同源策略（Sameoriginpolicy）它是浏览器最核心也最基本的安全功能。

同源具有以下三个相同点 协议、域名、端口。如果有一项不相同那么就产生了跨域。

同源策略限制以下几种行为：

• Cookie、LocalStorage 和 IndexDB 无法读取
• DOM和JS对象无法获得
• AJAX 请求不能发送

跨域常用解决方案

1. jsonp 不常用

利用 <script> 标签没有跨域限制，网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。

特点：优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法。

2. CORS（跨域资源共享）常用

后端设置请求头。

CORS请求设置的响应头字段，都以 Access-Control-开头:

Access-Control-Allow-Origin：必选,它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。 服务端设置,前端直接使用。

Access-Control-Allow-Credentials : 可选，如果为true那么就是，表示是否允许发送Cookie。

3.代理跨域

后端：修改nginx服务器配置来实现

#配置api代理
location ^~/api/ {
  proxy_pass <http://www.api.com/>;
}

前端：修改 vue.config.js 的 devServer进行修改

devServer:{
      host:'localhost',
      port:8080,
      proxy:{
        '/api':{
          target:'<http://www.api.com/>',
          changeOrigin:true,
          pathRewrite:{
            '/api':''
          }
        }
      }
}

脚本宝典总结

以上是脚本宝典为你收集整理的同源策略和跨域解决方案全部内容，希望文章能够帮你解决同源策略和跨域解决方案所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。