vue.js - Vue & Axios：为什么我设置了代理后仍然出现 CORS 错误？

Question

向我的 vue 应用程序添加代理后，我仍然收到 CORS 错误。

在我的vue.config.js 上，它看起来像这样。

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://website.com/",
        changeOrigin: true
      }
    }
  }
}

当我使用 axios 调用我的 api 时，我的代码如下所示

const response = await axios.post(`/api/Inbound/getData`,dataBody);

然而，我仍然对 CORS 有疑问，这就是控制台上显示的内容。

从源“http://localhost:8080”访问“https://website.com/api/Inbound/getData”（从“http://localhost:8080/api/Inbound/getData”重定向）的 XMLHttpRequest被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：它没有 HTTP ok 状态

我还设置了 IIS 以允许使用Startup.cs上的以下代码从跨源源接收数据

app.UseCors(builder => builder
                .AllowAnyHeader()
                .AllowAnyMethod()
                .SetIsOriginAllowed((host) => true)
                .AllowCredentials());

并编辑我的Web.config文件以具有以下几行

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
   <httpProtocol>
         <customHeaders>
           <add name="Access-Control-Allow-Origin" value="*" />
         </customHeaders>
   </httpProtocol>

</system.webServer>
</configuration>

任何想法为什么会发生这个问题都会很棒。

编辑 1：添加startup.cs文件

public class Startup
    {
        readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

        public Startup(IConfiguration configuration)
        {
            _config = configuration;
            StaticConfig = configuration;
        }

        public IConfiguration _config { get; }

        public static IConfiguration StaticConfig { get; private set; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddCors();

            services.AddDbContextPool<OutboundDBContext>(options => options.UseSqlServer(_config.GetConnectionString("APICon")));
            services.AddDbContextPool<InBoundDBContext>(options => options.UseSqlServer(_config.GetConnectionString("APICon")));
            services.AddDbContextPool<ManagementDBContext>(options => options.UseSqlServer(_config.GetConnectionString("APICon")));
            
            

            services.AddMvc().AddXmlSerializerFormatters();
            services.AddScoped<IOutboundData, OutboundSQLData>();
            services.AddScoped<IInboundData, InboundSQLData>();
            services.AddScoped<IManagementData, ManagementSQLData>();


            services.AddControllers().AddJsonOptions(options =>
            {
                options.JsonSerializerOptions.PropertyNamingPolicy = null;
            });

            services.AddSwaggerGen(c =>
            {
                c.SwaggerDoc("v1", new OpenApiInfo { Title = "Web Api", Version = "v1" });
            });
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseSwagger();
                app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "Web Api"));
            }

            app.UseCors(builder => builder
                .AllowAnyHeader()
                .AllowAnyMethod()
                .SetIsOriginAllowed(_ => true)
                .AllowCredentials());

            app.UseHttpsRedirection();

            app.UseRouting();


            //app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
            });
        }
    }

标签： vue.jsiisaxiosvue-router