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. 页面发送请求

<script src='jsonp.js'><script>   //需要在jsonp请求之前
<script src="http://127.0,0,1:8000/fn"><script>  // 通过src属性请求进行跨域,浏览器不拦截

3. 后台返回的对应函数和数据

res.setHeader("Content-type", "application/javascript")  //设置响应的类型
res.end("fn(123)")

优缺点

1. 需要前端和后台配合, 前端要根据后台返回函数名设置全局接收数据的回调

三、proxy 代理服务器 (开发中用)

1. 发送请求到代理服务器, 由代理服务器发送请求目标的服务器
2. 目标服务器, 响应数据给代理服务器, 代理服务再返回数据给浏览器
3. 脚手架已经配置了node代理服务器, 只需要配置需要代理的目标服务器就行了

脚手架配置需要代理的主机

1. vue在config/index.js 中的proxytable 中进行配置

优缺点

1. 需要前端自己搭这个proxy, 不过一般脚架已经配置好了

扩展:

Request Header 请求头

Accept: 设置接收的那些类型的数据, 浏览器根据顺序解析

Response Header 响应头

Content-type: 设置返回的类型, 浏览器根据这个类型进行解析, 例如: javascript

res.setHeader("Content-type", "application/javascript")