×
大家都在搜

微信扫码登录

使用验证码登录

QQ登录

只需一步,快速开始

+发表新主题
分享
开启左侧

新闻风向标vue devServe vue.config.js解决跨域

[复制链接]

新闻风向标vue devServe vue.config.js解决跨域

岁月如歌 发表于 2024-6-27 11:30:38 浏览:  64 回复:  0 [显示全部楼层] 回帖奖励 |正序浏览 |阅读模式


开发调用本地接口或远程接口时,由于前端和接口不在同一域下,被导致跨域问题出现,浏览器出错提示:CORS:NA-C-A-OC,测试效果:如果你的后端小伙伴可以改尽量让后端改,改只作为开发测试。

跨域问题
现在绝大多数的项目都是前后端分离的,前后端分离后势必会遇到跨域问题。如下图



注意此时并不是后端没有收到请求,而是收到请求了,也返回结果了,但是浏览器将结果拦截了,并且报错



同源策略
那么浏览器为什么会报错呢

因为浏览器基于安全考虑而引入的同源策略

当协议+域+端口者都相同时,才不会产生跨域问题,即同源。此时才能读取到服务端的响应

如何解决跨域虽然同源策略保证了安全,但一些理的用途也会受到影响。
例如前端项目在域下发送一个A请求到域,由于同源策略我们的A请求会报错,导致不能正常请求接口

如果在浏览器直接打印不受跨域是吧!可以直接拿到数据,噢,那聪明的小伙伴,又是一个灵机一动,我吧它复制施展大法,我去请求JSON,恩恩,先不说,方便与否,如果1万行呢,也复制所以不可取

解决跨域的方式有很多种,简单介绍2个

JSONPJSONP主要是利用标签将请求发送出去,来现数据的加载,但这种方式有一个缺点,即只能支持GET请求,其他请求都不能支持,因为JSONP这种方式已经很少使用了,所以不做过多的介绍

!DOCTYPE
=""


="UTF-8"
-="X-UA-C"="IE="
=""="=-,-=10"
D




=E("");
="360==";
=EBTN("")[0];
C();

({});
属性帮助我们访问接口返回的是一段代码返回的代码格式是
({:,:111})
意思是执行函数参是请求到的数据

我们需要定义一个去接收这个参

(){
();
}








接口代理

在根目录下新建文件

修改默认配置,配置跨域
={
解决打包目录错误,
P:"",
S:{
:{
"":{
:__这是完整路径,将后的路径重写路径为
1目标路径这里相当于公共的地址
:":",
:9090,11端口号默认的可以不配
:,12运行项目自启
2允许跨域
O:,
是否代理
:,
3重写路径
R:{
'^':''
}
}
}
}
}


在页面使用重要的事说遍重启重启重启服务!!


{
(){
{};
},
:{
L(){
$({
:'POST',
:'__',别替代了:,发起请求就是我们本地发起的

})(()={
()
})
},
},
:{},
:{},
:{},
(){
$("N");
L();
},
};





我们的接口变成了8080从本地发起的





简单说下及时通讯和
例如:微信聊天可现即时通讯








于是彩虹网盘也得到了很多的关注,也想加入到这个行列当中。https://www.uihtm.com/php/19700.htmlHTML源码网(www.uihtm.com)提供div+css3响应式模板包括:网页模板、企业模板、商城模板,以及h5网站,jQuery网页特效,wp主题等8000G源码免费模板下载。