最新推荐文章于 2023-05-25 15:25:57 发布

最近试着用vue+axios来搭建前端，实现前后端分离，后端采用asp.net coe mvc 架构，在前端axios调用后端接口时，出现了跨域请求的错误问题，经过一番查找，最终成功实现了跨域请求，迈出了前后端分离的第一步。跨域问题浏览器报错的日志如下：

Error: Network Error
at createError (createError.js?2d83:16)
at XMLHttpRequest.handleError (xhr.js?b50d:84)

刚开始在后端加入了断点，前端运行后，是可以走到后端接口中的断点里，前端的参数也可以传到后端中，所以我总觉得不是后端的问题，但是后来试了很多方法后，还是同样的报错信息，我尝试着在后端中加入解决跨域请求的配置后，问题就没有了，前端成功调用后端接口，实现了跨域请求。
因此记录一下在asp.net core3.0中如何实现跨域请求的问题。
我遇到的基本情况就是这样。废话不多说，下面记录了如何解决core3.0的跨域请求配置。

1. 在Startup.cs中的ConfigureServices中加入以下代码：

     public void ConfigureServices(IServiceCollection services)
         //在configservices中增加注册以下服务
         //配置跨域处理   可以多配置Policy，应对不同的访问域
         //以下代码是往自己项目中添加的内容
         services.AddCors(options =>
             options.AddPolicy("any", builder =>
                 builder.AllowAnyOrigin() //允许任何来源的主机访问
                 //builder.WithOrigins("localhost:5000")//设置允许访问的域
                 .AllowAnyMethod()
                 .AllowAnyHeader()
                 .AllowCredentials();//
             });
         });
在Startup.cs中的Configure中粘贴以下代码：
 
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
            if (env.IsDevelopment())
                app.UseDeveloperExceptionPage();
                app.UseExceptionHandler("/Home/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            //以下代码是往自己项目中添加的内容
            //其中“any” 是对应上面service里的’options.AddPolicy("any", builder =>‘ 中的 any
            app.UseCors("any");//这样就使用到全局了。
axios在传参时，后端代码接收不到参数的可能原因有如下
 参考链接：https://segmentfault.com/a/1190000012635783
 https://segmentfault.com/a/1190000015261229
 我是通过引用qs这种方案进行解决的
 
 
import qs from ‘qs’
 data: qs.stringify(data)
 
具体使用代码如下：
 
 * 用户相关请求模块
import qs from 'qs'
import request from '@/utils/request'
// 用户登录
export const login = data => {
  console.log(qs.stringify(data))
  return request({
    method: 'POST',
    url: 'StudentAccount/Login',
    // data 用来设置 POST 请求体
    // data: data  // 同名时可以简写
    data: qs.stringify(data)
需要注意的是：后端在接受参数时，需要与前端传递参数的字段同名，就会自动得到对应字段的值：
 我前段传递的参数结构是这样的
 
 
mobile=13911111111&code=246810&Account=15735659622&Password=112233&LoginType=Phone&agree=true
 
Json格式是这样的
 
例如我的后端接收参数是这样写的：
 
public JsonResult Login(string mobile,string Account,string Password,string LoginType)
	//功能逻辑代码实现
后端对应的变量名，就取到了前端对应属性的值，就此.net core+vue+axios前后端跨域post请求传参结束。
 
如上有什么问题，欢迎大家批评指正。
                                    Uncaught (in promise) Error: Network Error
  at createError (webpack-internal:///./node_modules/axios/lib/core/createError.js:16)
  at XMLHttpRequest.handleError (webpack-internal:///./node_module...
                                    axios请求错误封装处理，全屏弹出Uncaught runtime errors:handleError@webpack-internal:///./node_modules/webpack-dev-server控制台也会全部展示
https://blog.csdn.net/yuanlaijike/article/details/80522621
适用于react
https://www.cnblogs.com/zengjielin/p/9342515.html
                                    Vue项目axios请求时报错Network Error at createError at XMLHttpRequest.handleError错误解决可能的原因一解决方案可能的原因二解决方案
Vue项目axios请求时报错：
Error: Network Error
at createError (https://localhost:3000/node_modules/.vite/axios.js?v=2d671dec:333:19)
at XMLHttpRequest.handleError 
String
(默认: “GET”) 请求方式 (“POST” 或 “GET”)， 默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
timeout
Number
设置请求超时时间（毫秒）。此设置将覆盖全局设置。
async 
Boolean
(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器