Angular2/Spring Boot 允许 PUT 上的跨域答案

【问题标题】：Angular2/Spring Boot Allow Cross Origin on PUTAngular2/Spring Boot 允许 PUT 上的跨域
【发布时间】：2018-03-29 01:49:10
【问题描述】：

我的 Web 应用程序有一个小问题：连接到 Spring Boot API 的 angular2 应用程序。

我无法从 angular2 应用程序访问我的请求。我收到此错误：

Failed to load http://localhost:8080/deliveryMan/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

Java 代码：

@RestController
@RequestMapping(value = "/deliveryMan")
@CrossOrigin
public class DeliveryManController {

    @Autowired
    DeliveryManService deliveryManService;

    @RequestMapping(value = "/getAllDeliveryMan", method = RequestMethod.GET)
    public Iterable<DeliveryMan> getAllDeliveryMan(){
        return deliveryManService.findAll();
    }

    @RequestMapping(method = RequestMethod.PUT, consumes = "application/json")
    public DeliveryMan addDeliveryMan(@RequestBody DeliveryMan deliveryMan) throws InvalidObjectException {
        deliveryManService.save(deliveryMan);
        return deliveryMan;
    }

@SpringBootApplication
@EnableAutoConfiguration
@ComponentScan
public class MyApp{

    public static void main(String[] args) {
        SpringApplication.run(MyApp.class, args);
    }
}

angular2 代码：

private apiUrl = 'http://localhost:8080/deliveryMan/';

getAll(): Promise<DeliveryMan[]> {
  const url = this.apiUrl + 'getAllDeliveryMan';
  return this.http.get(url)
    .toPromise()
    .then(response => response.json().data as DeliveryMan[])
    .catch(this.handleError);
}

saveDeliveryMan(deliveryMan: DeliveryMan): Promise<DeliveryMan> {
  const url = this.apiUrl;
  return this.http.put(url, JSON.stringify(deliveryMan), this.headers)
    .toPromise()
    .then(() => deliveryMan)
    .catch(this.handleError);
}

为了解决这个问题，我在我的控制器类中添加了@CrossOrigin。它解决了 getAll 方法的问题，但不能解决附加方法的问题。

如何解决它，以便我可以使用 PUT 方法而不会出现此错误？

【问题讨论】：

标签： javascript java spring angular

【解决方案1】：

在您的项目中创建CORSFilter.java 文件。

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CORSFilter implements Filter {

    /**
     * CORS filter for http-request and response
     */
    public CORSFilter() {
    }

    /**
     * Do Filter on every http-request.
     */
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "access_token, authorization, content-type");

        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            chain.doFilter(req, res);
        }
    }

    /**
     * Destroy method
     */
    @Override
    public void destroy() {
    }

    /**
     * Initialize CORS filter 
     */
    @Override
    public void init(FilterConfig arg0) throws ServletException {
    }
}

你可以参考这个帖子Angular 2 Spring Boot Login CORS Problems

【讨论】：

【解决方案2】：

您可以只使用：（它应该适用于所有 CRUD 操作）

@CrossOrigin(origins = "*")

【讨论】：

它不会改变任何东西......文档说：“默认情况下，所有来源和 GET、HEAD 和 POST 方法都是允许的”。即使使用 (origins = "*") 它也不适用于我的 PUT 方法。

【解决方案3】：

将@CrossOrigin(origins = "http://localhost:4200") 注释添加到您的控制器中，例如：

@CrossOrigin(origins = "http://localhost:4200")
@RequestMapping(method = RequestMethod.PUT, consumes = "application/json")
    public DeliveryMan addDeliveryMan(@RequestBody DeliveryMan deliveryMan) throws InvalidObjectException {
        deliveryManService.save(deliveryMan);
        return deliveryMan;
    }

【讨论】：

正如我对@Amit 所说：它不会改变任何东西......文档说：“默认情况下，所有来源和 GET、HEAD 和 POST 方法都是允许的”。即使使用 (origins = "localhost:4200") 它也不适用于我的 PUT 方法。