同源策略和跨域的解决方案

1.什么是同源策略

首先，我们需要了解什么是“同源”’？
当两个页面的协议，域名和端口都相同的时候，我们称这两个页面是同源

同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能。它限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
简而言之就是浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互。

2.什么是跨域

跨域指的是两个 URL 的协议、域名、端口只要其中一个不一致，就会形成跨域。
出现跨域的根本原因 浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。

3.如何解决跨域

解决跨域一般分为3种

1.JSONP

原理：利用html对于script、img、link、iframe等标签发起的请求不受同源策略的影响，从而利用script标签发送请求。

img标签默认会将响应回来的内容当做图片解析

link标签默认会将响应回来的内容当做css解析

iframe标签默认会将响应回来的内容当做html页面解析

script标签默认会将响应回来的内容当做js代码执行

2.cors

原理：在请求的目标服务器中，设置允许跨域的响应头，浏览器就没有立场去拦截请求信息了。

给目标访问设置响应头：

'Acess-Control-Allow-Origin': '白名单地址'

3.代理配置

首先打开vite.config.js

修改配置如下：

这里的 '/api' 指的是你想代理的请求，而target则是你所想请求的后端地址。 新手最容易出现的问题就是localhost:3000去请求localhost:8080，那么在target处应该填写8080.

最后，在实际请求方法中，你可以写成如下代码：

axois.post('/api/xxx', data)