如何解决 Angular 12 中的 CORS 问题？

Question

我正在开发一个 Angular 项目，我有登录页面，在提交登录 API 期间，我遇到了 CORS 错误。我还附上了它的屏幕截图。任何建议将不胜感激。

 API Service.ts:

           constructor( private http: HttpClient ) { }
              httpOptionsPost = {
                headers: new HttpHeaders({
                  'Content-Type': 'application/json',
                  'Access-Control-Allow-Origin': '*',
                  'Access-Control-Allow-Credentials': 'true',
                  'Access-Control-Allow-Methods' : 'GET, POST, OPTIONS',
                  'Access-Control-Allow-Headers' : 'Origin, Content-Type, Accept, X-Custom-Header, Upgrade-Insecure-Requests',
                })
              };
        
              httpOptionsGet = {
                headers: new HttpHeaders({
                  'Content-Type': 'application/json',
                  'Access-Control-Allow-Origin': '*',
                })
              };
        
              _login(username, password) {
                const url = this.domain + '/api/login?username='+username+'&password='+password;
                return this.http.post(url, {}, this.httpOptionsPost);
              }

Login Component: 

    this.apiService._login(data.username, data.password).subscribe((resp: any) => {
          const resobj = JSON.parse(JSON.stringify(resp));
          console.log(resobj);
    })
        
        

Answer 1

Cors 预检应在服务器端代码处理。在您的情况下，请尝试将以下注释添加到您的控制器类中。

@CrossOrigin("*") 
@PostMapping("/user")
public User userController(){

}

希望您有一个用于处理 CORS 的配置类，如果没有，请尝试添加一个。示例代码供参考。

@Configuration
public class SpringSecurityConfiguration extends WebSecurityConfigurerAdapter {

@Override
protected void configure(HttpSecurity http) throws Exception {
    List<String> allowedMethods=new ArrayList<>();
    allowedMethods.add("GET");
    allowedMethods.add("POST");
    allowedMethods.add("PUT");
    allowedMethods.add("DELETE");
    CorsConfiguration cors=new CorsConfiguration();
    cors.setAllowedMethods(allowedMethods);

     http.cors().configurationSource(request -> cors.applyPermitDefaultValues());

    http.csrf().disable().sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
            .authorizeRequests().requestMatchers(EndpointRequest.to("loggers")).hasRole("ADMIN").and().httpBasic();

}}

Answer 2

您需要设置代理配置才能在本地运行应用程序。

一个简短的例子是：

// create a file proxy.config.json
{
  "/api": {
    "target": "http://example.com/", // put your actual domain
    "secure": false // true or false depending on your needs.
  }
}

然后运行您的项目，将代理配置传递给 ng-serve 或在 package.json 中配置它。 例如：

ng serve --proxy-config proxy.conf.json

或

npm start -- --proxy-config proxy.conf.json

或者简单地在 angular.json 中配置它。

然后，在代码中删除域的使用，或者如果域与要部署应用程序的域不同，则使用environment.dev.ts 将域分配给 localhost。 我指的是这个块中的域变量。

_login(username, password) {
    const url = this.domain + '/api/login?username='+username+'&password='+password;
    return this.http.post(url, {}, this.httpOptionsPost);
}

更多详细信息请参见 https://www.positronx.io/setting-up-angular-proxy-configuration-via-angular-json/ 和/或官方 webpack 站点中的高级代理配置

Answer 3

在你的问题中，pc_coder 的答案是正确的： cors与后端有关。确保您允许 api 到达请求

喜欢这个链接： Access-Control-Allow-Origin 标头如何工作？

Answer 4

我对 Angular 不太熟悉。但是，我在 Vue.js 中遇到了相同的 CORS 问题，解决方案是更改添加这些行：

module.exports = {
  
    devServer: {
        proxy: 'https://yourdomain'
    }
    
  
}

并且在执行 .get 或 .post 时将

https://yourdomain/login

替换为 localhost，例如：

'http://localhost:8082/login'

我不确定这是否对你有用，因为我对此也很陌生，但它确实对我有用。

Answer 5

在浏览器从 Angular 客户端应用程序调用 API URL 之前，它将发送预检请求（HTTP OPTIONS 调用）。仅当您的客户端应用程序和服务器端应用程序驻留在不同的子域或域中时，才会发生这种情况。服务器端应用程序负责控制是否应服务跨源请求。我发现您正在请求标头中设置 CORS 标头。但应该从 API 服务器接收。因此，请从角端删除它，并在服务器端代码中进行适当的更改。

Answer 6

默认情况下，同源策略（SOP）禁止对不同资源的请求。一切都应该从同一源加载。这是为了防止网站在用户不知情的情况下从不同的服务器加载数据。但是，在某些情况下需要这样做。为了应对这种情况并仍然提供高安全性测量，CORS 应运而生。 使用 CORS，可以将请求发送到与原始服务器不同的服务器。 为此，接收请求的网络服务器必须进行相应配置。在您的情况下，这意味着您必须在提供您正在调用的登录 API 的应用程序中调整 CORS 设置，并允许

localhost:4200

能够发送 CORS 请求。

Answer 7

我也尝试过这种方法，但仍然再次收到同样的错误。这是解决方案

https://techdaytodayissue.blogspot.com/2025/01/how-to-resolve-cors-issue-in-angular-12.html