0

我正在开发一个 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);
    })

显示错误的屏幕截图

4

6 回答 6

1

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

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

于 2021-10-19T05:51:33.367 回答
1

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

一个简短的例子是：

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

然后运行您的项目，将代理 conf 传递给 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 站点中的更多详细信息以获取高级代理配置

于 2021-07-01T19:14:49.207 回答
0

默认情况下，Same-Origin-Policy (SOP) 禁止对不同资源的请求。一切都应该从同一个来源加载。这是为了防止网站在用户不知情的情况下从不同的服务器加载数据。但是，在某些情况下需要这样做。为了涵盖这种情况并仍然提供高安全性测量，创建了 CORS。使用 CORS，可以将请求发送到与原始服务器不同的服务器。为此，必须相应地配置接收请求的网络服务器。在您的情况下，这意味着您必须在提供您正在调用的登录 API 的应用程序中调整 CORS 设置，并允许localhost:4200发送 CORS 请求。

于 2021-06-23T12:11:13.903 回答
0

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

于 2021-06-23T12:03:37.197 回答
0

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();

}}
于 2021-07-09T08:56:32.133 回答
0

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

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

并 https://yourdomain/login在执行 .get 或 .post 时将其替换为 localhost，例如：'http://localhost:8082/login'

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

于 2021-06-23T11:51:19.510 回答