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"