centos 如何解决Angular 12中的CORS问题?

0aydgbwb  于 2022-11-08  发布在  Angular
关注(0)|答案(6)|浏览(220)

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

qxgroojn

qxgroojn1#

您需要设置代理配置以在本地运行应用程序。
一个简短的例子是:

// 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站点

e5nszbig

e5nszbig2#

应该在服务器端代码处理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();

}}
vxf3dgd4

vxf3dgd43#

在您的问题中,pc_coder的答案是正确的:cors与后端相关。请确保您允许从api到达请求
如链接:How does Access-Control-Allow-Origin header work?

k5hmc34c

k5hmc34c4#

我不是很熟悉Angular。但是,我在Vue.js中遇到了相同的CORS问题,解决方法是更改添加以下行:

module.exports = {

    devServer: {
        proxy: 'https://yourdomain'
    }

}

并在执行.get或.post时将https://yourdomain/login替换为localhost,例如:'http://localhost:8082/login'
我不知道这是否会为您工作,因为我也是非常新的在这方面,但它确实为我工作。

yzckvree

yzckvree5#

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

6ovsh4lw

6ovsh4lw6#

默认情况下,同源策略(SOP)禁止对不同资源的请求。所有内容都应从同一个源加载。这是为了防止网站在用户不知情的情况下从不同的服务器加载数据。但是,在某些情况下需要这样做。为了涵盖此类情况并仍提供高安全性措施,已创建CORS。使用CORS,可以将请求发送到与原始服务器不同的服务器。为此,必须相应地配置接收请求的Web服务器。在您的情况下,这意味着:您必须调整应用程序中的CORS设置,该应用程序提供您正在调用的登录API,并允许localhost:4200能够发送CORS请求。

相关问题