origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present

完整错误信息:

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>

你可能感兴趣的:(axios)