Angular2/Spring Boot 允许在 PUT 上交叉原点 [英] Angular2/Spring Boot Allow Cross Origin on PUT
问题描述
我的 Web 应用程序有一个小问题:一个 angular2 应用程序连接到 Spring Boot API.
I have a little problem on my web application: an angular2 app connected to a spring boot API.
我无法从 angular2 应用访问我的请求.我收到此错误:
I can't access my request from the angular2 app. I get this error :
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 代码:
The angular2 code :
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 方法的问题,但不能解决其他方法的问题.
In order to solve the problem, i added @CrossOrigin to my controller class. It resolves the problem for the getAll method but not for the additional one.
如何解决它以便我可以使用 PUT 方法而不会出现此错误?
How to resolve it so I can use PUT methods without getting this error?
推荐答案
在您的项目中创建 CORSFilter.java
文件.
Create CORSFilter.java
file in your project.
@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 登录 CORS 问题
这篇关于Angular2/Spring Boot 允许在 PUT 上交叉原点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!