Vue + ASP.NET core 解决跨域问题

前端用vue搭建的，跑在本地端口8080，后端用ASP.NET core写的，跑在本地端口44345，前端用axios请求接口。
先改前端，在config文件夹下的index.js中找到proxyTable，proxyTable 是 vue-cli 脚手架在开发模式下为我们提供的一个跨域的代理中转服务器服务，那一块改成

proxyTable: {
'/api': {
target: 'https://localhost:44345/',
changeOrigin: true,
"secure": false,
pathRewrite: {
'^/api': ''
}
}
}

中间那行“secure”:false,是因为后端接口是https，不加会SSL报错。

proxyTable 跨域的基本原理是:

• 在开发模式下，webpack 会为我们提供一个http代理服务器。
• 我们请求接口的时候，实际上是请求的webpack提供的这个http代理服务器。
• 再由这个代理服务器请求真实的数据服务器。
• 最后数据经由webpack代理服务器，转交给我们的vue程序。

然后改后端，在startup.cs中找到public void Configure函数，找到后在里面加上

app.UseCors(options =>
{
options.WithOrigins("http://localhost:8080", "http://127.0.0.1"); // 允许特定ip跨域
options.AllowAnyHeader();
options.AllowAnyMethod();
options.AllowCredentials();
});

加完这个函数大概就是这样（函数中其余代码依自己的情况而定）：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseSwagger();
app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "LunhuiApp v1"));
}
app.UseCors(options =>
{
options.WithOrigins("http://localhost:8080", "http://127.0.0.1"); // 允许特定ip跨域
options.AllowAnyHeader();
options.AllowAnyMethod();
options.AllowCredentials();
});
app.UseHttpsRedirection();
app.UseRouting();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
}

这样改完后，前端用axios请求的时候，url只需要写成’/api/你的接口名称‘，就像这样：

axios.post('/api/Todo/deleteTodo?id=3').then(async (response) => {
var res = response.data;
console.log(res);
});
})

请求到的实际url为"https://localhost:44345/Todo/deleteTodo?id=3"

最后

以上就是诚心日记本为你收集整理的Vue + ASP.NET core 解决跨域问题的全部内容，希望文章能够帮你解决Vue + ASP.NET core 解决跨域问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。