同源策略和跨域解决方案

什么是同源策略

同源策略（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':''
          }
        }
      }
}

标签：Control,跨域,解决方案,Access,api,同源,请求
来源： https://www.cnblogs.com/sixdouble/p/15852115.html