完整错误信息:
Access to XMLHttpRequest at 'http://localhost:8080/test/hello?
name=%E6%88%91%E7%9A%84%E9%92%B1&action=1313' from origin 'null'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin'
header is present on the requested resource.
大概意思就是cors阻止了你请求的资源(跨域问题);
解决办法:
如果是spring项目的,在相应方法上加上这个注解;
@CrossOrigin
其他项目的解决办法如下:
将头文件设置可以跨域;
resp.setContentType("text/json; charset=utf-8");
resp.setHeader("Access-Control-Allow-Origin", "*");
完整代码(后台):
package yu;
import java.io.IOException;
import java.util.Enumeration;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
public class Hello extends HttpServlet{
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
String name=(String) (req.getParameter("name"));
String action=(String) (req.getParameter("action"));
System.out.println(name);
System.out.println(action);
Bean wenxi=new Bean("我是你","爸爸");
resp.setContentType("text/json; charset=utf-8");
resp.setHeader("Access-Control-Allow-Origin", "*");
resp.setHeader("Access-Control-Max-Age", "3600");
resp.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
resp.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
resp.getWriter().print(JSON.toJSONString(wenxi));
}
}
如果你是post的话:
后台代码如下(通过f12 你可以看到它请求方式 变成options,不是post):
package yu;
import java.io.IOException;
import java.util.Enumeration;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
public class Hello extends HttpServlet{
private static final long serialVersionUID = 1L;
@Override
protected void doOptions(HttpServletRequest arg0, HttpServletResponse arg1) throws ServletException, IOException {
System.out.println("这是一个坑");
arg1.setHeader("Access-Control-Allow-Methods", "OPTIONS, GET, POST");
arg1.setHeader("Access-Control-Allow-Headers", "x-requested-with");
arg1.setHeader("Access-Control-Max-Age", "86400");
arg1.setHeader("Access-Control-Allow-Origin", "*");
doPost(arg0, arg1);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
String name=(String) (req.getParameter("name"));
String action=(String) (req.getParameter("action"));
System.out.println(name);
System.out.println(action);
Bean wenxi=new Bean("你是我","的眼");
resp.setContentType("text/json; charset=utf-8");
resp.setHeader("Access-Control-Allow-Origin", "*");
resp.setHeader("Access-Control-Max-Age", "3600");
resp.setHeader("Access-Control-Allow-Headers", "x-requested-with");
resp.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
resp.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
resp.getWriter().print(JSON.toJSONString(wenxi));
}
}
post请求(前端):
axios.post('http://localhost:8080/test/hello',Qs.stringify(dat1), {headers: { 'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})
这里需要使用qs(简易导入) 通过bootcdn ,就可以直接使用;
<script src="https://cdn.bootcss.com/qs/6.8.0/qs.min.js"></script>