Angular7 中的 CORS 策略已阻止 origin 'http://localhost:4200'

Question

我想在我的角度项目中使用http://5.160.2.148:8091/api/trainTicketing/city/findAll rest 来获取城市。
我在我的项目中使用了 7.2.15 版的 angular。
当使用 httpClient 获取此 url 时抛出以下错误：

 Access to XMLHttpRequest at 'http://5.160.2.148:8091/api/trainTicketing/city/findAll' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

在浏览器和邮递员中输入 url 时正常工作。

为什么 ？

Answer 1

解决方案 1 - 您需要更改后端以接受传入的请求

解决方案 2 - 使用 Angular 代理请参见此处

请注意，这仅适用于ng serve，您不能在ng build

注意：它通过邮递员工作的原因是邮递员不会在您的浏览器发送预检请求时发送。

Answer 2

如果您使用 spring boot ，则应在 @CrossOrigin 注释中添加原点链接

@CrossOrigin(origins = "http://localhost:4200")
@GetMapping("/yourPath")

您可以在https://spring.io/guides/gs/rest-service-cors/ 中找到详细说明

Answer 3

对于 .NET 核心 3.1

我在添加cors 中间件之前使用了https 重定向，并且能够通过更改它们的顺序来解决问题

我的意思是：

改变这个：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {

      ...
        
        app.UseHttpsRedirection();  

        app.UseCors(x => x
            .AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader());

      ...

     }

对此：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {

      ...
        
        app.UseCors(x => x
            .AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader());

        app.UseHttpsRedirection(); 

      ...

     }

顺便说一句，允许来自任何来源和方法的请求在生产阶段可能不是一个好主意，您应该在生产阶段编写自己的 cors 策略。

Answer 4

解决方案需要将这些标头添加到服务器响应中。

'Access-Control-Allow-Origin', '*'
'Access-Control-Allow-Methods', 'GET,POST,OPTIONS,DELETE,PUT'

如果您有权访问服务器，则可以添加它们，这将解决您的问题

或者

您可以尝试在 url 前连接它：

https://cors-anywhere.herokuapp.com/

Answer 5

你们都擅长 Angular 方面，即使邮递员没有提出 cors 政策问题。这类问题大都在后端解决。

如果您使用 Spring Boot，您可以通过将此注释放置在您的控制器类或任何特定方法中来避免此问题。

@CrossOrigin(origins = "http://localhost:4200")

如果使用 spring boot 进行全局配置，请配置以下两个类：

`

@EnableWebSecurity
@AllArgsConstructor

public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
    public void configure(HttpSecurity httpSecurity) throws Exception{
        httpSecurity.csrf().disable()
        .authorizeRequests()
        .antMatchers("/api1/**").permitAll()
        .antMatchers("/api2/**").permitAll()
        .antMatchers("/api3/**").permitAll()
        
}
`

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry corsRegistry) {
        corsRegistry.addMapping("/**")
                .allowedOrigins("http://localhost:4200")
                .allowedMethods("*")
                .maxAge(3600L)
                .allowedHeaders("*")
                .exposedHeaders("Authorization")
                .allowCredentials(true);
    }

Answer 6

按着这些次序

1. 添加 cors 依赖项。在项目目录中的 cli 中键入以下内容

npm install --save cors

2. 将模块包含在您的项目中

var cors = require('cors');

3. 最后将其用作中间件。

app.use(cors());

Answer 7

WebAPI 中的 Startup.cs。

app.UseCors(options => options.AllowAnyOrigin());  

在 ConfigureServices 方法中：

services.AddCors(c =>  
{  
    c.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin());  
});

在控制器中：

[HttpGet]  
     [Route("GetAllAuthor")]  
     [EnableCors("AllowOrigin")] 

Answer 8

如果您的项目是.net Core 3.1 API项目。

将 .net core 项目中的 Startup.cs 更新为：

public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }
    readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors(options =>
        {
            options.AddPolicy(MyAllowSpecificOrigins,
            builder =>
            {
                builder.WithOrigins("http://localhost:53135",
                                    "http://localhost:4200"
                                    )
                                    .AllowAnyHeader()
                                    .AllowAnyMethod();
            });
        });
        services.AddDbContext<CIVDataContext>(options =>
        options.UseSqlServer(Configuration.GetConnectionString("CIVDatabaseConnection")));
        services.AddControllers();
    }

    // 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.UseCors(MyAllowSpecificOrigins);

        app.UseRouting();

        app.UseAuthorization();

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

       
    }
}

Answer 9

对于开发过程中的临时测试，我们可以通过像这样打开具有禁用网络安全性的 chrome 来禁用它。

打开命令行终端并转到安装 chrome 的文件夹，即 C:\Program Files (x86)\Google\Chrome\Application

输入这个命令：

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

一个新的浏览器窗口将打开并禁用网络安全。仅将其用于测试您的应用程序。