什么是跨域以及如何解决?通俗易懂带你彻底搞定( 二 )


事实上正是这样的 , 这也是之前好奇 , 解决跨域问题 , 为什么是后端加一些配置 , 其实就是在响应头中添加了一些特殊的响应头
那么这些特殊的响应头是什么呢?
我们先看看 www.helloworld.net 是怎么解决的 , 添加了哪些响应头字段
 

什么是跨域以及如何解决?通俗易懂带你彻底搞定

文章插图
 
是的 , 只要后端在响应的时候 , 在响应头中添加以下字段 , 就可以解决跨域问题
  • access-control-allow-origin : 该字段是必须的 。它的值要么是请求时Origin字段的值 , 要么是一个* , 表示接受任意域名的请求 。
  • access-control-allow-credentials : 该字段可选 。它的值是一个布尔值 , 表示是否允许发送Cookie 。默认情况下 , Cookie不包括在CORS请求之中 。设为true , 即表示服务器明确许可 , Cookie可以包含在请求中 , 一起发给服务器 。这个值也只能设为true , 如果服务器不要浏览器发送Cookie , 删除该字段即可
  • Access-Control-Allow-Methods : 该字段必需 , 它的值是逗号分隔的一个字符串 , 表明服务器支持的所有跨域请求的方法 。注意 , 返回的是所有支持的方法 , 而不单是浏览器请求的那个方法 。这是为了避免多次"预检"请求 。
其实最重要的就是
access-control-allow-origin 字段 , 添加一个 *  , 允许所有的域都能访问
当然 , 解决跨域还有其它方法 , 本文只讲最常用的 , 其它的方法可以自己搜一下
 
五 总结:通过以上的讲解 , 现在总结如下
  • 同源策略:协议 , 主机 , 端口 三者都相同 , 就是同一个源 , 只要有一个不同 , 就是不同的源 , 只有同一个源的资源才能互相访问
  • 跨域问题就是浏览器的同源策略造成的
  • 跨域问题的本质  , 就是浏览器拦截了响应 , 所以后端只需要在响应头中添加相应的字段 , 就可以解决跨域问题
还有记住下面这张图
 
什么是跨域以及如何解决?通俗易懂带你彻底搞定

文章插图
 




推荐阅读