Vs,Hbuilder X解决Web Api跨域问题

时间:2024-05-19 15:23:23

ASP.net Web API允许跨域访问

跨域是什么?
答:浏览器从一个域名的网页去请求另一个域名的资源的时候,域名、端口、协议任一不同,都是跨域
为什么要跨域?
答:在前后端分离的模式下,前后端的域名是不一致的,此时就会发生跨域访问问题。
我们在学习中最容易遇到的跨域环境:
当vs启动服务打开的网页
Vs2019,Hbuilder X解决Web Api跨域问题

我们会发现网页端口号是44388
我们再来看到HBuilderX打开的网页
Vs2019,Hbuilder X解决Web Api跨域问题

我们会发现网页端口号是8848

Vs打开的网页端口是44388,HBuilderX打开的网页端口是8848,这也会发现跨域问题
Vs2019,Hbuilder X解决Web Api跨域问题

我对此跨域问题的解决方案:更改项目中的applicationhost.config
1.首先先把项目的隐藏的项目勾上,会看到一个.vs的文件
Vs2019,Hbuilder X解决Web Api跨域问题

2.将applicationhost.config拖入vs
Vs2019,Hbuilder X解决Web Api跨域问题

3.按CTRL+F,搜httpProtocol,如图下
Vs2019,Hbuilder X解决Web Api跨域问题

4.将以下代码覆盖httpProtocol,如图下:







Vs2019,Hbuilder X解决Web Api跨域问题

5.配置文件配置完毕之后,打开你的api控制器,将Options()方法加进去(每个都需要加),跨域问题即可解决,Post传值需要处理一下,在下方有示例
public string Options(){
return null;
}
Vs2019,Hbuilder X解决Web Api跨域问题

Post请求接受类型改为dynamic即可,最好用info(自命名,与api参数名一致就行,我个人页面传值方式)传,在传参前需要JSON.stringify(info)
info:
let info={
参数名1:值1,
参数名2:值2,
。。。
};
如图下:
Post请求:
Vs2019,Hbuilder X解决Web Api跨域问题
Vs2019,Hbuilder X解决Web Api跨域问题