Question

我正在尝试为我的Web应用程序创建用户管理API。当我从前端向后端发送API调用时，会发生cors错误。核心问题如何解决？我读了很多主题，但是没有取得任何进展。

createUser（）API调用后发生错误

Access to XMLHttpRequest at 'http://localhost:8080/user/create' 
from origin 'http://localhost:4200' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
Redirect is not allowed for a preflight request.

Angular header.config.ts

export const HTTP_OPTIONS = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Access-Control-Allow-Credentials' : 'true',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, POST, PATCH, DELETE, PUT, OPTIONS',
    'Access-Control-Allow-Headers': 'Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With',
  })
};

Angular rest-user.service.ts

  public createUser() {
    return this.httpClient.post(this.USER_ENDPOINT + 'create', HTTP_OPTIONS);
  }

SpringConfig.class

@Configuration
@EnableWebMvc
public class SpringConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**");
    }
}

SpringSecurityConfig.class

@Configuration
public class SpringSecurityConfig extends WebSecurityConfigurerAdapter {  
    @Override  
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests().anyRequest().authenticated()
        .and().oauth2Client()
        .and().oauth2Login();
    }

}

UserRestController.class

@PostMapping("/user/create")
@ResponseBody
@ResponseStatus(HttpStatus.CREATED)
public void createUser(Principal principal) throws UserAlreadyExistsException {
    userServiceFacadeImpl.createUser(principal.getName());
}

网络消息

更新20.06.19

  private createUser() {

    const headersObject = new HttpHeaders();

    this.oktaAuth.getAccessToken().then( (value) => {

      headersObject.append('Authorization', 'Bearer ' + value);
      headersObject.append('Content-Type', 'application/json');

      const httpOptions = {
        headers: headersObject
      };

      this.httpClient.post('http://localhost:8080/user/' + 'create', null, httpOptions);
    });

  }

Answer 1

如果您使用 Spring 作为后端服务器，尤其是使用 Spring Security，那么我通过将 http.cors(); 放在 {{1} } 方法。该方法看起来像这样：

configure

Answer 2

由于始发端口4200与8080不同，因此，在angular发送一个create（PUT）请求之前，它将向服务器发送一个OPTIONS请求，以检查所有方法以及所有访问控件是否就绪。服务器必须使用允许的方法和允许的来源列表来响应该OPTIONS请求。

由于您使用的是Spring Boot，简单的解决方案是添加".allowedOrigins("http://localhost:4200");"

在您的spring配置中，类

@Configuration
@EnableWebMvc
public class SpringConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("http://localhost:4200");
    }
}

但是，更好的方法是编写一个Filter（interceptor），该过滤器会在每个响应中添加必要的标头。

Answer 3

您必须在资源的http响应中设置http标头。因此，需要在服务器端进行设置，您可以从角度HTTP发布请求中删除“ HTTP_OPTIONS”标头。

Answer 4

您可能需要在Spring Boot端配置CORS。请在您的项目中添加以下课程。

Grass

更新：

要将令牌附加到每个请求，您可以创建一个拦截器，如下所示。

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
@EnableWebMvc
public class WebConfig implements Filter,WebMvcConfigurer {



    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**");
    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) {
      HttpServletResponse response = (HttpServletResponse) res;
      HttpServletRequest request = (HttpServletRequest) req;
      System.out.println("WebConfig; "+request.getRequestURI());
      response.setHeader("Access-Control-Allow-Origin", "*");
      response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
      response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With,observe");
      response.setHeader("Access-Control-Max-Age", "3600");
      response.setHeader("Access-Control-Allow-Credentials", "true");
      response.setHeader("Access-Control-Expose-Headers", "Authorization");
      response.addHeader("Access-Control-Expose-Headers", "responseType");
      response.addHeader("Access-Control-Expose-Headers", "observe");
      System.out.println("Request Method: "+request.getMethod());
      if (!(request.getMethod().equalsIgnoreCase("OPTIONS"))) {
          try {
              chain.doFilter(req, res);
          } catch(Exception e) {
              e.printStackTrace();
          }
      } else {
          System.out.println("Pre-flight");
          response.setHeader("Access-Control-Allow-Origin", "*");
          response.setHeader("Access-Control-Allow-Methods", "POST,GET,DELETE,PUT");
          response.setHeader("Access-Control-Max-Age", "3600");
          response.setHeader("Access-Control-Allow-Headers", "Access-Control-Expose-Headers"+"Authorization, content-type," +
          "USERID"+"ROLE"+
                  "access-control-request-headers,access-control-request-method,accept,origin,authorization,x-requested-with,responseType,observe");
          response.setStatus(HttpServletResponse.SC_OK);
      }

    }

}

Example

Answer 5

您可以仅将所需的CORS配置创建为Bean。按照下面的代码，这将允许所有来自任何来源的请求。这对发展有利，但不安全。 Spring Docs

@Bean
WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurer() {
        @Override
        void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("*")
        }
    }
}

Answer 6

如果您在前端使用 Angular CLI，那么

在您的根目录中创建一个 proxy.conf.json 并添加以下内容

{

   "/api": {
     "target": "your backend url",
     "secure": true,
     "changeOrigin": true,
     "pathRewrite": {
       "^/api": ""
     }
   }
 }

使用此命令运行您的开发服务器 ng serve --proxy-config proxy.conf.json
您将在代码中使用基本网址 ${your frontend url}/api/

Answer 7

CORS标头应从服务器发送。如果使用PHP，它将像这样：

header('Access-Control-Allow-Origin: your-host');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Methods: your-methods like POST,GET');
header('Access-Control-Allow-Headers: content-type or other');
header('Content-Type: application/json');

访问被CORS策略阻止：对预检请求的响应未通过访问控制检查

7 个答案: