跨域问题是浏览器阻止造成的
image.png

jsonp

通过src属性和href请求数据是不存在跨域
原理：动态生成script标签通过src属性来进行请求加载
缺点：jsonp只支持get请求
应用场景：有些第三方数据接口，可能会使用jsonp解决跨域问题，工作中用的少

服务器代理：（中间服务器代理）

image.png
实现原理：比如我们的项目地址是127.0.0.1:8000，要访问的目标服务器是127.0.0.1.8888，这个时候，因为同源策略的影响，就会造成跨域，这个时候，我们可以采用服务器代理的方式，来解决跨域问题，也就是在项目地址和目标服务器之间在建一个服务器（127.0.0.1:8000），因为中间这个服务器和我们的项目地址是一样的，用这个中间服务器，去请求目标服务器的数据，这个时候，因为服务器和服务器之间是不存在跨域问题的，然后，我们在用我们的项目地址，去请求，中间服务器就行，也就是我们通过请求中间服务器，中间服务器，请求目标服务器。来获取到数据，然后，在由中间服务器，把这个数据，返回到我们的项目地址，实现服务器代理解决跨域
image.png
3.CORS跨域资源共享，服务器端进行配置，加一个响应头
工作中常用的解决方法后端配置的
image.png

image.png
image.png

vue中服务器反向代理（给vue.config.js文件设置devServer 中设置proxy）

image.png
vue的配置文件，vue.config.js中配置
同时记得看下面的图，proxy中设置了‘/api’表示只有我们写接口的时候，就要在接口地址前面写上/api，只有/api的接口，才会走这个反向代理（因为我们在proxy）中写了/api，（同时也不是所有接口都需要做跨域处理）

下图设置的是只要我们的接口是/api开头的就会走跨域的这个代理服务器
image.png

同时记得修改基地址

image.png
小细节（当我们如上面写了’/api’后，在写接口的时候就不需要在前面加/api了）（2个地方写一个就行，写那个都写）
image.png
我们做了反向代理以后，看network，发现请求的地址，是8000，其实这个8000的地址，就是中间的服务器的地址，我们只要做了下图的，就相当于，自动生成了一个中间服务器，（我们不需要在做其他配置）看着是请求8000，其实背后请求的就是下面target设置的8888
image.png
image.png

image.png
image.png

image.png

下载第三方包解决跨域（如果后端用的是koa框架写的）
步骤一：npm i koa-cors 是打开后端代码下载的
步骤2 进入app.js中随便找个位置写 const app=new Koa() app.use(coRs()) 这2句话是写到后端的app.js页面中的
image.png