同源策略以及解决跨域问题

Access-Control-Allow-Origin 报跨域错误
Access to XMLHttpRequest at ‘https://m.lagou.com/listmore.json’ from origin ‘http://localhost’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

域:域名,网站
1.为什么产生跨域错误。
因为浏览器的同源策略
2.什么叫浏览器的同源策略
同源策略:同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web页面的域相同。

同源策略是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。
3.哪些情况会产生跨域。
同源策略以及解决跨域问题

4.如何解决跨域问题。

后端代理–后端不存在跨域
同源策略以及解决跨域问题这里的$ajax()是封装的一个函数,这里主要参考后端的写法
同源策略以及解决跨域问题

cors(
—跨域资源共享-cors
后端跨域的页面添加几行代码。
CORS需要浏览器和服务器同时支持,才可以实现跨域请求,目前几乎所有浏览器都支持CORS,IE则不能低于IE10。CORS的整个过程都由浏览器自动完成,前端无需做任何设置,跟平时发送ajax请求并无差异。so,实现CORS的关键在于服务器,只要服务器实现CORS接口,就可以实现跨域通信。)
同源策略以及解决跨域问题
header(“Access-Control-Allow-Origin:*”); // 指定允许其他域名访问
header(“Access-Control-Request-Methods:GET, POST, PUT, DELETE”); //指定请求方式 响应类型
header('Access-Control-Allow-Headers:x-requested-with,content-type); //响应头设置

jsonp
1.jsonp:json with padding 将json数据填充到函数内部以实参的形式返回…
2.script标签会把请求回来的所有内容当作js代码来执行–script标签不存在跨域。每一个script拥有作用域。
3.jsonp 支持get请求。
4.回调函数-callback
同源策略以及解决跨域问题
jsonp应用:
同源策略以及解决跨域问题