前端如何解决跨域问题

1. Cross-Origin Resource Sharing（跨域资源共享）

CORS出现的原因：浏览器的同源策略。

同源策略出现的原因：试想一下，如果我们浏览器没有同源策略，第一不同的网页之间的cookie，indexDB,localStorage...等等都可以共享那么浏览器存入的数据是极其不安全的，第二我们可以设计出一个钓鱼网站，当用户输入一些无关的消息的时候我可以调用一些银行或者说一些私密的接口进而达到窃取或者破坏的效果。

当出现跨域问题的时候咱们如何解决跨域呢？？？

前端：

1. 最直接的方式

浏览器处理跨域问题的时候，会将发起的请求分为简单请求以及非简单请求

-  简单请求（满足下面条件）：

     1⃣️：请求方式为post,get

     2⃣️：请求头字段不能超过：Accept，Accept-Language，Content-Language，Last-Event-ID，Content-Type。且content-type只能为下面几个字段：application/x-www-form-urlencoded （对应普通表单），multipart/form-data （对应文件上传），text/plain 对应文本发送(一般不怎么用)。

- 非简单请求：

很好理解，如果说他超出了简单请求的条件就可以称为非简单请求，像咱们常用的post请求，其实是个简单请求对吧，但是因为一般携带的数据为json,也就是content-type为application/json所以为非简单请求，一旦发送非简单请求，浏览器就会发送一个 OPTIONS 预检(preflight)请求。

-解决方案：我们可以在封装对应的axios或者其他的工具的时候给他的请求头或者请求体中添加

对应的消息可以了。

例如：

Access-Control-Allow-Origin（指定哪些源是可以共享资源的(包含协议、域名、端口)。）

Access-Control-Allow-Credentials（是否允许携带cookie）

Access-Control-Expose-Headers（指定同类的其他字段）

Access-Control-Request-Method（指定其他Restful-api方法）

Access-Control-Request-Headers（指定 HTTP 请求头会额外添加的信息）

2. JSONP

原理：虽然说浏览器禁止了同源策略的请求，但是并没有限制script调用的方式啊，或者说像img的src也不会有跨域问题。

因此咱们可以通过在一个页面中写出一个方法fn,然后通过script调用其他url，并且后边带入查询字符串callback并指定为函数fn,因此其他页面中的数据就会返回到fn中。

const fn=(data)=>{
    alert(data);
}

<script src="http://xxx.com?callback=fn"></script>

--jsonp这种处理跨域的方式就是生成script发起get请求的方式，比较不安全不是很推荐.

3. 正向代理

原理：众所周知浏览器之间是存在跨域问题的，但是服务器之间是没有跨域问题的啊，就像vue本地跑案例的时候咱们不是会启动一个devserver，这个其实也就是对浏览器做了一层代理，这个devserver就会向服务器发送请求并把数据返回给浏览器，然后我们在devServer中也就是vue.config.js中去设置了对应的cross-origin这也就是相当于处理了跨域。

4. 反向代理

原理：我们在后端服务很多的时候，可以配置一个统一的gatway去做相应的跨域处理，其实这个也就是对服务器做了一层反向代理。

后端:

跨域一定要在后端做处理，前端其实做的也没多大作用，主要是后端做了处理之后，返回给前端的请求体中会带入相应的access发送给浏览器就可以处理了，如果有人问到前端如何去做处理cros你可以这样回答，但是如果后端不支持跨域其实压根没用！！！