本地服务器跨域问题 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource 解决方法
·
前后端分离项目跨域问题,浏览器控制台报错:No 'Access-Control-Allow-Origin' header is present on the requested resource. 请求方法为OPTIONS,状态值为302或403。
报错信息如下:
我的JS请求代码如下:
function doPost() {
let params = {
userName:"朱",
pwd : "bestv001",
birthday : "2022-12-06"
};
const xmlHttp = new XMLHttpRequest();
xmlHttp.open("POST", "http://localhost:8180/demo_war_exploded/login2?accessToken=dfgddf");
xmlHttp.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
xmlHttp.send(JSON.stringify(params));
xmlHttp.onreadystatechange = function () {
// 为了保证 数据 完整返回,我们一般会判断 两个值
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//(5)服务端相应:如果能够进入这个判断,说明数据请求成功了
console.log('数据返回成功:' + JSON.stringify(xmlHttp.responseText));
alert(JSON.stringify(xmlHttp.responseText))
}
};
}
是 POST 请求,且 Content-Type = 'application/json; charset=utf-8',其实Content-Type字段的类型为application/json 的 POST 请求,CORS规定,Content-Type不属于以下类型的,都属于预检请求 (preflight request):
application/x-www-form-urlencoded
multipart/form-data
text/plain
发送"预检请求"时,需要用到方法 OPTIONS 。
服务端的代码很简单,如下:
@PostMapping(value = "/login2")
@ResponseBody
public LoginReq login2(@RequestBody LoginReq req, HttpServletRequest servletRequest, HttpServletResponse response) {
System.out.println("---- login2 ----- userName = " + req.getUserName());
// // 设置js请求跨域解决
// response.setHeader("Access-Control-Allow-Origin", "*");
// response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
String accessToken = servletRequest.getParameter("accessToken");
System.out.println("---- login2 --------------- accessToken = " + accessToken);
String user = JSONObject.toJSONString(req);
System.out.println("---- login2 ----- user = " + user);
System.out.println("---- login2 ----- birthday = " + req.getBirthday());
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm");
Date date = null;
try {
date = simpleDateFormat.parse(simpleDateFormat.format(req.getBirthday()));
} catch (ParseException e) {
e.printStackTrace();
}
System.out.println("date = " + simpleDateFormat.format(date));
req.setBirthday(new Date());
if (req.getUserName().isEmpty() || req.getPwd().isEmpty()) {
throw new RuntimeException("userName or pwd is empty");
}
return req;
}
解决办法:通过修改 Tomcat 配置
修改本地服务端项目中的 web.xml 文件,如下图:
如果项目中有其他的 filter,那么把即将添加的跨域 filter 放在其他 filter 的前面,如下:
<filter>
<filter-name>MyCorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
<init-param>
<param-name>cors.allowed.origins</param-name>
<param-value>http://localhost:63342</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.methods</param-name>
<param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.headers</param-name>
<param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
</init-param>
<init-param>
<param-name>cors.exposed.headers</param-name>
<param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
</init-param>
<init-param>
<param-name>cors.support.credentials</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>cors.preflight.maxage</param-name>
<param-value>18</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>MyCorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
其中 http://localhost:63342 就是我的网页地址,改成你自己的地址就好,重启 Tomcat ,再次运行就 OK了。
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)