配置代理——解决跨域问题(详解)

之前写项目的时候总会遇到配置代理的问题,可是配置了之后有时有用,有时就没有用,自己之前学的也是懵懵懂懂,于是专门花了一个小时去了解了如何配置代理跨域,然后在此记录一下,方便自己以后查阅。

一、 常用发送 ajax 请求的方式

1、通过原生的 xhr(XMLHttpRequest) 发起 ajax 请求 ——比较麻烦,真正开发中不常用

2、通过 jQuery 发起 ajax 请求 ——内部封装了XHR,但是主要操作DOM,不推荐使用

3、通过 axios 发起 ajax 请求——内部也封装了XHR,并且体积小,官方推荐使用

4、通过 fetch 发起请求——包裹两层 Promise,并且在IE浏览器中兼容性比较差,较少使用

由于官方推荐使用 axios,并且体积小,支持请求拦截器和响应拦截器,所以本篇文章主要通过  axios来进行讲解,如何配置代理,解决跨域问题。

二、跨域问题的产生

当出现以下报错,看到 CORS'Access-Control-Allow-Origin' 这两个关键信息的时候,就说明出现跨域问题了

(一)产生问题

所谓跨域就是违背了同源策略,同源策略是一个著名的安全策略,规定了协议名,主机名,端口号这三个要一致。下面用图来详细讲解一下刚刚的流程

配置代理——解决跨域问题(详解)_第1张图片

 这是刚刚发请求的过程,根据上图可以看出来,请求已经发出去了,浏览器也已经把数据返回回来了,可是为什么我们拿不到呢,这是因为浏览器发现你跨域了,所以它将数据握在了自己手里,没有给我们。

(二)注意事项

这里有很多人以为产生跨域的时候,连请求都没有发出去,这样理解是错误的,请求已经发出去了,服务器也把数据返回回去了,只不过浏览器没有给我们罢了,这个一定要记住!

三、如何解决跨域

1、CORS 解决跨域

cors 解决跨域,不需要前端做任何事情,只需要后端返回数据的时候加特殊的响应头即可。这里就不对 CORS 进行详细的讲解了,如果有感兴趣的同学可以去看我这篇文章,里面详细讲解了CORS的实现:CORS如何实现跨域

2、jsonp 解决跨域

JSONP 解决跨域,就是利用

你可能感兴趣的:(一些重要笔记,js,安全,前端,js,proxy模式)