跨域

跨域

1.如果是跨域，浏览器会报一个固定格式的错误

Access to XMLHttpRequest at ‘ajax请求URL’ from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

2.什么是跨域

浏览器使用AJAX发送请求，如果请求地址与当前页面地址不同源，称之为跨域

• ajax请求：只有ajax请求才会出现跨域，请他请求方式不会有跨域 src href
• 请求地址：需要请求的服务器地址
• 当前页面地址：地址栏地址（window.location.href）
• 不同源:协议名，主机名或端口号，有任何一个不一致

3.同源

两个url 地址的 协议名（http）,主机名（ip）,端口号完全一致

4.同源策略

同源策略的目的是为了防止恶意网站窃取用户的数据信息冒充用户做一些操作。同源限制只是提高攻击成本。

5.解决方案

工作中难免会使用AJAX向不同源的地址发送请求，以下是两种常见的解决方式：

（1）cors : 目前主流解决方案

• cors方案与前端没有任何关系，是服务端实现

• 核心原理：服务端设置一个特殊的响应头，res.setHeader(‘Access-Control-Allow-Origin’);通俗说就是告诉服务器，我是安全的，不要拒绝我。

• express中间件：cors 给所有的接口设置响应头。
  （2）JSONP

• 核心工作原理：利用浏览器漏洞，（利用script标签的src属性,服务器返回的是一个函数的调用，则浏览器会自动调用这个函数）。

• 工作流程
  a:浏览器声明一个函数
  b:浏览器使用script标签的src属性发送请求，将函数名作为参数，格式是：callback=函数名
  c:服务器获取请求之后，拿到callback参数的值（前端的函数名），响应返回这个函数调用，将响应的数据做为这个函数的参数。

（3）jquery使用JSONP
把ajax请求中的dataType设置为jsonp

• 动态的添加一个script标签,将url作为script标签的src属性
• jq会自动在src后面拼接一个参数：callback=success
• 服务器响应之后，jq会自动移除script.