解决方案1-你需要改变你的后端来接受你的传入请求

解决方案2-使用角代理 看这里

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

解决方案3-如果你的后端接受来自通配符域(如 *.mydomain.example)的请求，然后你可以编辑你的 hosts文件并在其中添加 127.0.0.1 local.mydomain.example，然后在你的浏览器中输入 local.mydomain.example:4200而不是 localhost:4200

注意: 它通过邮递员工作的原因是邮递员不发送飞行前的请求，而你的浏览器可以。

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

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

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

或者

你可以尝试在 url 前连接:

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

按照以下步骤操作

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

npm install --save cors

2. 将模块包含在项目中

var cors = require('cors');

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

app.use(cors());

如果使用 Spring boot，则应该在@CrossOrigin 注释中添加起源链接

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

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

WebAPI 中的 Startup.cs。

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

在 ConfigureServices 方法中:

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

总监:

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

你们都擅长角度方面，即使邮递员不提出高尔夫球政策的问题。 在大多数情况下，这种类型的问题是在后端解决的。

如果您正在使用 Spring 引导，那么您可以通过将此注释放在您的控制器类或任何特定方法上来避免这个问题。

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

在使用弹簧启动的全局配置情况下，配置如下两个类:

`

@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);
}

1: 创建一个类 WebMvcConfig 并按照 < strong > WebMvcConfiguration 所示对其进行扩展，然后重写 AddCorsMaps方法。

2: 最重要的是，不要忘记使其 @ 配置注释，因为它应该与主春天类加载，以允许交叉起源。

  @Configuration
public class WebMvcCofig implements WebMvcConfigurer{
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/*")
.allowedOrigins("*")
.allowedMethods("*")
.allowedHeaders("*")
.allowCredentials(true);
}
}

对于.NET CORE 3.1

我正在使用 Https 重定向之前，添加 Cors 中间件和能够修复的问题，改变他们的顺序

我的意思是:

改变这一点:

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 策略。

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

将.net 核心项目中的 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();
});


       

}
}

如果您正在使用 弹簧靴进行服务器端编码，那么请添加一个 Servlet 过滤器并添加您的 Spring-boot 应用程序的以下代码。应该可以。必须添加 "Access-Control-Allow-Headers", "*"。不需要创建 Proxy Conf.json。

    @Component
@Order(1)
public class MyProjectFilter implements Filter {


@Override
public void doFilter(ServletRequest req, ServletResponse res,
FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");
response.setHeader("Access-Control-Allow-Methods", "GET,POST,PATCH,DELETE,PUT,OPTIONS");
response.setHeader("Access-Control-Allow-Headers", "*");
response.setHeader("Access-Control-Max-Age", "86400");
chain.doFilter(req, res);
}
}

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

打开命令行终端，进入安装 Chrome 的文件夹，例如 C: Program Files (x86) Google Chrome Application

输入以下命令:

User-data-dir = “ C:/Chrome dev session”—— able-web-security

一个新的浏览器窗口将打开与禁用网络安全。使用它只是为了测试你的应用程序。

在我使用 角靴和弹簧靴的例子中，我在 SecurityConfig 中解决了这个问题:

http.csrf().disable().cors().disable()
.authorizeRequests()
.antMatchers(HttpMethod.POST, "/register")
.anonymous()
.anyRequest().authenticated()
.and()
.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);

或者把这句话换成:

http.csrf().disable().cors().and()

另一个测试选项是 pom.xml 中的 删除依赖项，其他代码也依赖于它。这就像关闭 Spring 的安全性:

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
<version>2.3.3.RELEASE</version>
</dependency>

对于 nodejs，请使用以下代码

res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');

我尝试在我的 API 上添加下面的语句，它与 Angular8一起工作。

app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET , PUT , POST , DELETE");
res.header("Access-Control-Allow-Headers", "Content-Type, x-requested-with");
next(); // Important
})

如果您使用 Springboot2，您可以在控制器类中添加 CrossOrigin 注释

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

这招对我很管用！

创建一个类并在 Spring 启动应用程序中添加以下配置。

    package com.myapp.springboot.configs;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    

@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/*").
allowedOrigins("*").
allowedMethods("*").
allowedHeaders("*").
allowCredentials(true);
}
}

There are so many ways to handle the issue of CORs in spring boot, the easiest way is to just put the @CrossOrigin annotation on top of the Controller may be in your ..resource java file. Try

@CrossOrigin(origins= {"*"}, maxAge = 4800, allowCredentials = "false" @RestController

更多信息请阅读弹簧启动 CORs 文档。谢谢。

如果你使用的是带有 Dotnet 核心的 Angular:

在 Startup.cs 课上

在 ConfigureServices 方法上添加:

services.AddCors();

在方法 Configureadd 上

app.UseCors(options => options.AllowAnyHeader().AllowAnyMethod().WithOrigins("http://localhost:4200"));

我尝试了上面给出的所有解决方案，并在使用 nodejs 后端时工作，但不幸的是，在使用 python 时它无法工作，所以我最终安装了一个插件 允许 CORS，至少这个插件有所帮助

在我的案例中，我发现了错误:

Access to XMLHttpRequest at 'localhost:5000/graphql' from origin 'http://localhost:4200' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, brave, chrome-untrusted, https.

确保在你的网址中包含一个协议(http 或 https)。

const uri = 'http://localhost:5000/graphql'; //

• 如果您使用的是 Spring 启动应用程序，那么只需添加@CrossOrigin 即可 并导入语句导入 注释.CrossOrigin; 这个集合和 再次运行应用程序

如果使用节点作为后端，则可以使用。只需在 Node.js 的 server.js“ API”端添加这些行，然后确保安装“ cors”

const express = require('express');
const app = express();
app.use(express.json());
var cors = require('cors');
app.use(cors());

JAVA 交叉策略中的 Normal REST API

@GET
@Path("getsample")
@Produces(MediaType.APPLICATION_JSON)
public Response getOptions() {
Map<String,String> map=new HashMap<String,String>();
// map.put("response",res);
map.put("name","Ajay");
map.put("id","20");
map.put("clg", "SLICA");
     

return Response.ok()
.header("Access-Control-Allow-Origin", "*")
.header("Access-Control-Allow-Methods", "POST, GET, PUT, UPDATE, OPTIONS")
.header("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With")
.entity(map)
.build();
  

}

如果您正在使用 fireBase 作为数据库，则需要添加”。到链接的末尾，这为我解决了问题

错误: https://uar-test-bd448-default-rtdb.firebaseio.com/rules

没有错误: https://uar-test-bd448-default-rtdb.firebaseio.com/rules.**json* *

如果使用 NodeJs (后端)与应用程序角度安装在 NodeJs 的 cors Npm install ——保存 cors

Var cors = need (‘ cors’) ;

Use (cors ()) ;

Nestjs

app.enableCors({ origin: "*" });

允许任何来源。我建议只允许在开发模式下使用。

Access to XMLHttpRequest at 'http://localhost:8080/getuser' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

步骤1: 必须在前端部分中添加 AuthInterceptor

文件 auth.ceptor.ts->

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";
import { LoginService } from "./login.service";




@Injectable({
providedIn: 'root'
})
export class AuthInterceptor implements HttpInterceptor {


constructor(private loginservice: LoginService) { }


intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {




const token = this.loginservice.getToken();


console.log("interceptor", token);


if (token != null) {
console.log("hello");


req = req.clone(
{
setHeaders: {
'Content-Type': 'application/json; charset=utf-8',
'Accept': 'application/json',
'Authorization': `Bearer ${token}`
}
}
)
}
return next.handle(req);


}


}

然后保存并再次运行。如果发生同样的问题，则执行下一步

如果在后端使用 Spring 引导，则 MySecurityConfig 文件包含配置方法。 配置方法->

public void configure(HttpSecurity http) throws Exception {
http.csrf().disable()
.cors().disbale()
.authorizeRequests()
.antMatchers("/token")
.permitAll()
.anyRequest()
.authenticated()
.and()
.sessionManagement()
.sessionCreationPolicy(SessionCreationPolicy.STATELESS)
.and()
.exceptionHandling()
.authenticationEntryPoint(entrypoint)
;
        

        

// if the problem not solve so change .cors().disable() -> .cors()   only


}

用于 SpringBoot2.7.0

在 Controller 类中添加这样的交叉注释-

package com.test.emp.controller;


import java.util.List;


import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;


import com.test.emp.entity.Employee;
import com.test.emp.service.EmployeeService;


@RestController
@CrossOrigin(origins = "*")
public class MyController {
    

@Autowired
private EmployeeService employeeService;
    

@GetMapping("/home")
public String home() {
return "this is home page";
}
    

@PostMapping("/add-employee")
public Employee addEmployee(@RequestBody Employee employee) {
return this.employeeService.addEmployee(employee);
}
    

@GetMapping("/all-employee")
public List<Employee> allEmployee() {
return this.employeeService.getAllEmployee();
}


}

注意-我使用星型的所有类型的 url，如果你想访问任何特定的 url 提到这样-

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

如果您正在使用 Springboot，那么您可以将以下内容添加到主类中。 下面这句话对我很有用。

@Bean
public CorsFilter corsFilter() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.setAllowCredentials(true);
corsConfiguration.setAllowedOrigins(Arrays.asList("http://localhost:4200",  "<other urls>")); //Collections.singletonList("http://localhost:4200"));
corsConfiguration.setAllowedHeaders(Arrays.asList("Origin", "Access-Control-Allow-Origin", "Content-Type",
"Accept", "Jwt-Token", "Authorization", "Origin, Accept", "X-Requested-With",
"Access-Control-Request-Method", "Access-Control-Request-Headers"));
corsConfiguration.setExposedHeaders(Arrays.asList("Origin", "Content-Type", "Accept", "Jwt-Token", "Authorization",
"Access-Control-Allow-Origin", "Access-Control-Allow-Origin", "Access-Control-Allow-Credentials"));
corsConfiguration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "OPTIONS"));
UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
return new CorsFilter(urlBasedCorsConfigurationSource);
}

如果您有多个映射注释，例如使用

@RequestMapping("/api/v1/")

在班上名列前茅

@GetMapping("/employees")

这样，你就不需要为每个方法编写下面的代码了; 在类的顶部编写代码就足够了:

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

@CrossOrigin(origins = "/http://localhost:4200", maxAge = 3600).