web跨域之jsonp, cors, proxy理解

摘要：跨域跨域产生原因协议名不一样主机不一样端口不一样跨域有无问题请求会产生问题这是浏览器处理的结果通过统一资源定位获取的图片资源也是一种跨域但是不会产生问题处理跨域的方法只支持返回响应头允许跨域开发中使用服务器代理例如一服务器端设置响

跨域产生原因:
a. 协议名不一样

  b. 主机不一样
  c. 端口不一样

跨域有无问题:

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

处理跨域的方法

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

服务器端:

response.setHeader("Acoss-Control-Allow-Origin", "*") // 设置响应头,允许接收地址设置

不要设置为* ===> 允许所有请求地址通过

优缺点:

不需要前端设置, 后台设置

不安全, 没有http服务的服务器不支持

根据后台的函数名, 设置全局的脚本函数, 设置接收数据的回调函数

发送标签src的http请求, 不是异步ajax(http)请求a

jsonp配置

配置全局js

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

页面发送请求