ajax跨域问题？

什么是跨域问题？

跨域问题来源于JavaScript的"同源策略"，即只有 协议+主机名+端口号 (如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的，html本身没有跨域问题。

查看浏览器开发者工具Console报错：

Failed to load http://a.a.com:8080/A/FromServlet?userName=123: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://b.b.com:8080' is therefore not allowed access.

http://www.abc.com/a/b 调用 http://www.abc.com/d/c（非跨域）

http://www.abc.com/a/b 调用 http://www.def.com/a/b （跨域：域名不一致）

http://www.abc.com:8080/a/b 调用 http://www.abc.com:8081/d/c （跨域：端口不一致）

http://www.abc.com/a/b 调用 https://www.abc.com/d/c （跨域：协议不同）

请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。
————————————————
版权声明：本文为CSDN博主「itcats_cn」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/itcats_cn/article/details/82318092

jsonp解决跨域

后端：

    /**
     * Ajax跨域请求方式1---get请求
     * @param page
     * @param rows
     * @param response
     * @param request
     * @return callback  jsonp方式解决跨域，只能解决get，，
     * 特别注意----回调函数；
     */
    @RequestMapping(value = "/getCity2")
    @ResponseBody
    public String getCity2(
            @RequestParam(name = "page", defaultValue = "1", required = false) Integer page,
            @RequestParam(name = "rows", defaultValue = "10", required = false) Integer rows,
            HttpServletResponse response,
            HttpServletRequest request) {
        PageHelper.startPage(page, rows);
        List<City> all = cityDao.findAllByPage();
        /**
         * 特别注意这个，返回给前端，和jsonpCallback 名称一致。。。
         * 前台将直接获取这个东西
         */
        String result="successCallback("+JSON.toJSONString(all)+")";
        return result;
    }

前台：

	/**
			 * jsonp解决跨域问题，后端要相应的配合
			 */
			$.ajax({
				type: "get", //请求方式
				dataType: "jsonp", //跨域json请求一定是jsonp
				jsonp: "callback",//跨域请求的参数名，默认是callback
				jsonpCallback:"successCallback",
				url: 'http://127.0.0.1:8081/getCity2',
				async: false,
				success: function(msg) {
					console.log(msg);
				},
				error: function(error) {
					console.log(error)

				}
			});

开始的时候，，请求成功，返回也成功，但是一直进入ajax的error方法。。要特别注意jsonp的回调和回调函数名称和返回值的东西。

第二种方式：

后台解决，设置response的请求头。

 

 /**
     * ajax跨域请求2------后端解决问题。
     * @param page
     * @param rows
     * @param response
     * @param request
     * @return
     */
    @RequestMapping(value = "/getCity3")
    @ResponseBody
    public  List<City> getCity3(
            @RequestParam(name = "page", defaultValue = "1", required = false) Integer page,
            @RequestParam(name = "rows", defaultValue = "10", required = false) Integer rows,
            HttpServletResponse response,
            HttpServletRequest request) {
        PageHelper.startPage(page, rows);
        List<City> all = cityDao.findAllByPage();
        //header中的这个*指所有域名，参数指的是域名。。可以指定允许特定的域名
        response.setHeader("Access-Control-Allow-Origin", "*");
        return all;
    }

前端代码：

/**
			 * 后端设置response.header
			 * response.setHeader("Access-Control-Allow-Origin", "*");
			 * 都可以访问
			 */
				$.ajax({
				type: "post", //请求方式
				url: 'http://127.0.0.1:8081/getCity3',
				async: false,
				success: function(msg) {
					console.log(msg);
				},
				error: function(error) {
					console.log(error)

				}
			});

搞清楚这个的起因：学习vue,请求不到数据，进而想到跨域问题。原来一直使用的ajax都是在同源同域下使用。ajax访问layui请求数据，没有获取到数据，但是使用layui的模块可以。可能layui内部做了跨域的处理。

 

这两种方式----个人感觉没有达到我想要的结果。两厢情愿和一厢情愿。如果是一个正常的接口，我想获取当中的数据，我要该怎么办呢？还有，，之前我做的微信小程序有直接获取layui中的数据，却直接获取到了，这是个什么情况？微信有做处理吗？或者说微信请求，为什么没有跨域问题。----------后续。

 

第三种方式，由于跨域是浏览器的同源问题，那我就不走浏览器，后端发送http请求。

然后请求到数据，返回给前端，进而渲染数据。

/**
 * 在服务器中解决跨域问题，
 * 发送HTTP请求
 * @param url
 * @param page
 * @param rows
 * @return
 */
@RequestMapping(value = "/getCity4")
@ResponseBody
public String getCity4(
        @RequestParam(name = "url",required = true) String url,
        @RequestParam(name = "page", defaultValue = "1", required = false) Integer page,
        @RequestParam(name = "rows", defaultValue = "10", required = false) Integer rows) {
    String s = HttpClient4.doGet(url);//发送http请求的工具类。
    return s;
}

我想前端应该也会有单纯的http请求，解决浏览器的跨域。

如有不解，请加java爱好群大家交流：852665736；群里都是热心好客的小伙伴，大家一同进步。