web跨域 之 jsonp, cors, proxy理解

web跨域

1. 跨域产生原因:
   a. 协议名不一样
   b. 主机不一样
   c. 端口不一样

2. 跨域有无问题:
   a. ajax请求会产生问题, 这是浏览器处理的结果
   b. 通过url(统一资源定位)获取的图片(资源)也是一种跨域,但是不会产生问题

3. 处理跨域的方法
   jsonp 只支持get
   cors 返回响应头,允许跨域
   prory 开发中使用服务器代理(例如: webpack-dev-server)

一、cors

服务器端:

1. response.setHeader("Acoss-Control-Allow-Origin", "*") // 设置响应头,允许接收地址设置
   + 不要设置为* ===> 允许所有请求地址通过

优缺点:

1. 不需要前端设置, 后台设置
2. 不安全, 没有http服务的服务器不支持

二、jsonp (用的不多)

1. 根据后台的函数名, 设置全局的脚本函数, 设置接收数据的回调函数
2. 发送标签src的http请求, 不是异步ajax(http)请求a

jsonp配置

1. 配置全局js

 // jsonp.js
function fn (data){
    console.log(data)
}

2. 页面发送请求