消费时出现跨站错误 = “application/json” 存在答案

【问题标题】：Cross site error when consumes = "application/json" present消费时出现跨站错误 = “application/json” 存在
【发布时间】：2017-07-31 07:59:15
【问题描述】：

我正在使用 angular 2 和 spring 4。在我的控制器中，我设置了如下响应标头

this.res.setHeader("Access-Control-Allow-Origin", "*");
this.res.setHeader("Access-Control-Allow-Methods","POST, GET, OPTIONS, DELETE");

并使用下面的这一行来处理请求。

    @RequestMapping(value="/api/movieCategory/create", method = RequestMethod.POST)
    @ResponseBody   
    public String createMovieCategory(ModelMap model,HttpServletResponse res, @RequestParam Map<String,String> allRequestParams,
            HttpServletRequest req ) {

工作得很好。没有跨站点错误，但是当我将 consumes = "application/json" 参数添加到 @RequestMapping 时，出现以下错误。我不明白发生了什么。有什么想法吗？

XMLHttpRequest 无法加载 http://localhost:8080/api/movieCategory/create。不 'Access-Control-Allow-Origin' 标头出现在请求的资源。因此不允许使用原点“http://localhost:4200” 使用权。响应的 HTTP 状态代码为 415。

【问题讨论】：

标签： angular spring

【解决方案1】：

设置客户端头content-type: application/json

在您的角度服务中，从 @angular/http 导入 Headers 和 RequestOptions

import {Http, Response, RequestOptions, Headers} from '@angular/http';

然后在你的帖子之前的某个地方：

const headers = new Headers({ 'Content-Type': 'application/json' });
const options = new RequestOptions( {headers: headers});

然后发帖，传入你的选项对象：

...
this.http.post("/api/movieCategory/create", someData, options)
...

当您添加 consumes = "application/json" 选项时，您明确表示服务器需要 application/json 数据类型。如果在没有指定数据类型的情况下发出 cors 请求，则会收到 415 错误。在客户端添加标头应该允许客户端告诉服务器它在请求中发送的数据是application/json并且应该被接受。

【讨论】：

它说找不到名称 RequestOptions ？
更新了我的答案 - 如果找不到 RequestOptions，您的导入语句可能有问题
感谢您的回答，现在我被拒绝从 chrome 设置不安全的标头“Access-Control-Request-Method”
以前没见过，能否将请求的代码以角度添加到问题中以查看它？
@rematnarab 您没有在问题的代码 sn-p 中显示它，但您得到 “拒绝设置不安全标头”的唯一原因是“访问控制请求-方法“” 是如果您有前端 JavaScript 代码尝试手动将该标头添加到您的请求中。您不想这样做，因为 Access-Control-Request-Method 是仅由浏览器自动设置的标头，仅适用于浏览器本身发送的 CORS 预检 OPTIONS 请求。因此，您需要删除添加到前端 JavaScript 中并尝试添加的任何代码。