Angular2/Spring Boot 允许在 PUT 上交叉原点

IT技术 javascript java spring angular
2021-01-29 20:38:45

我的 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 方法而不会出现此错误？

3个回答

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

@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 方法。
2021-03-24 20:38:45

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

@CrossOrigin(origins = "*")
它不会改变任何东西......文档说：“默认情况下允许所有来源和 GET、HEAD 和 POST 方法”。即使使用 (origins = "*") 它也不适用于我的 PUT 方法。
2021-03-12 20:38:45
其它你可能感兴趣的问题
上一篇如何使用更改和删除事件在 Firefox 和 chrome/chromium 上传和列出目录 下一篇如何从另一个 iFrame 清除 iFrame 的内容