Hbuilder X与IDEA跨域问题的解决

问题摘要

我用Hbuilder X编写html界面，用IDEA写后端。然后用前者的html页面请求后者的功能，实现项目的前后端分离。但是在实现过程中遇到了跨域问题，特此记录一下关于跨域问题的解决方案。

具体需求

1、在IDEA中，我写了一个方法，就是查询所有订单信息的方法，代码如下所示：（注意加 @ResponseBody ）

@RequestMapping(value = "/assign")
public class AssignController {
    @Autowired
    private AssignMapper assignMapper;

    @GetMapping("findAll") // 查询的话就用get
	@ResponseBody
    public R findAll(){
        List<Assign> list = assignMapper.selectList(null);
        System.out.println("测试输出的值是："+test);
        return R.ok().data("items",list);
    }
}

我直接输入http://localhost:8080/assign/findAll即可实现该方法。返回结果如下图所示：

2、接着，就是我想在编写的页面中点击一个按钮（发布工单），就把这些数据给我传过来。并且打印到控制台上。

这是我的界面，可以看到这里的端口是8848

当我们点击发布工单时，控制台会报跨域的错误。如下图所示

从8848端口到8080端口的访问就是跨域问题，如下就是解决跨域问题的方法。

解决办法

1. 在控制器上方添加 @CrossOrigin(origins = "*",maxAge = 3600)与 @RequestMapping(value = "/assign",method = RequestMethod.POST)
2. Ajax请求方法为POST

注意，这里的method = RequestMethod.POST是不可缺少的。具体代码如下所示：

@CrossOrigin(origins = "*",maxAge = 3600)
@RestController
@RequestMapping(value = "/assign",method = RequestMethod.POST)
public class AssignController {
    @Autowired
    private AssignMapper assignMapper;

    @GetMapping("findAll") // 查询的话就用get

    public R findAll(@RequestBody WorkOrder test){
        List<Assign> list = assignMapper.selectList(null);
        System.out.println("测试输出的值是："+test);
        return R.ok().data("items",list);
    }
}

这时我们再点击按钮，即可成功打印出后端的返回信息。

我也在网上看到说是在请求头中加如下代码：

headers: {
		'Access-Control-Allow-Origin': '*',
	},

但是经过我的测试，加不加这个请求头的代码与否都不影响。以下是我的ajax请求相关代码：

$.ajax({
		cache: false,
		type: "POST",
		url:"http://localhost:8080/assign/findAll",
		data: JSON.stringify(date),
		dataType: "JSON",
		contentType:'application/json;charset=UTF-8',
		async: false,
		headers: {
			'Access-Control-Allow-Origin': '*',
				},
		success : function(result) {
		if (result) {   
			console.log(result);
			// console.log(JSON.stringify(date));
			}
		}		
	})

总结

综上所述，解决Hbuilder X与IDEA的跨域问题可以总结为以下两点：

1. 在控制器方法上添加@CrossOrigin(origins = "*",maxAge = 3600)和@RequestMapping(value = "/assign",method = RequestMethod.POST)
2. Ajax请求方法为POST。type: "POST",