The causes and Solutions of ajax Cross-domain

This article mainly explains "Ajax cross-domain causes and solutions," interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let Xiaobian take you to learn "Ajax cross-domain causes and solutions"!

AJAX Cross-Domain

course introduces

● What is AJAX Cross-Domain Problem

● Causes of AJAX cross-domain problems

● Ideas and methods for solving AJAX cross-domain problems

What is AJAX Cross-Domain Problem

● Simply put, when the front end calls the backend service interface

● Cross-domain issues arise if service interfaces are not in the same domain

AJAX cross-domain scenarios

● Front and back separation, service-oriented development model

● Scenarios where the front and back end development is independent and the front end needs to call a lot of backend interfaces

Cross-domain issues arise as long as the backend interfaces are not in the same domain.

● Cross-domain problems are common, and solving cross-domain problems is also important

AJAX Cross-Domain Causes

● Browser restrictions: browser security check restrictions

● Cross-domain (any difference in protocol, domain name and port will be considered cross-domain)

XHR (XMLHttpRequest) Request

AJAX cross-domain problem solving ideas

● Browser: The browser removes the cross-domain check, which is of little actual value.

●XHR: JSONP is used instead of XHR, which has many disadvantages and cannot meet the current development requirements.

● Cross-domain: callee modification supports cross-domain calls (specified parameters); caller modification hides cross-domain (proxy-based)

write tests

● Called party back-end code writing: Spring Boot

● Caller front-end code writing: Jquery

● Introduction of front-end Jasmine test framework

Why do cross-domain problems occur?

The picture above is also very clear, because the browser itself is limited for security (homology).

● When we send an XMLHttpRequest request, if the request is for another domain (host domain name, port), then cross-domain problems will occur (the client cannot obtain the data returned by the server)

It is worth noting that cross-domain problems occur in XMLHttpRequest requests, that is, XMLHttpRequest requests do not have cross-domain problems.

:: A simple example: when writing a web page,

，URL不是本域的还是可以正常获取该图片的

解决跨域问题的思路

环境搭建

2-1 后端项目

代码编写

1.创建名为ajax-server的maven工程pom如下

4.0.0 com.myimooc ajax-server 0.0.1-SNAPSHOT jar ajax-server Demo project for Spring Boot org.springframework.boot spring-boot-starter-parent 2.0.1.RELEASE UTF-8 UTF-8 1.8 org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-test test org.springframework.boot spring-boot-maven-plugin

2.编写AjaxServerStart类

package com.myimooc.ajax.server;import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication;/** *

* 标题: 启动类

* 描述: AJAX跨域讲解后端项目

* * @author zc * @date 2018/04/18 */@SpringBootApplicationpublic class AjaxServerStart { public static void main(String[] args) { SpringApplication.run(AjaxServerStart.class, args); }}

3.编写ResultBean类

package com.myimooc.ajax.server.vo;import java.io.Serializable;/** *

* 标题: REST请求响应POJO类

* 描述: 封装请求响应结果

* * @author zc * @date 2018/04/18 */public class ResultBean implements Serializable{ private static final long serialVersionUID = 7867107433319736719L; private String data; public ResultBean(String data) { this.data = data; } public String getData() { return data; } public void setData(String data) { this.data = data; }}

4.编写TestController类

package com.myimooc.ajax.server.controller;import com.myimooc.ajax.server.vo.ResultBean;import com.myimooc.ajax.server.vo.User;import org.springframework.web.bind.annotation.*;/** *

* 标题: 测试控制器

* 描述: 提供REST服务

* 使用 @CrossOrigin 注解支持跨域，可以放到类或方法上面 * @author zc * @date 2018/04/18 */@RestController@RequestMapping("/test")//@CrossOriginpublic class TestController { @GetMapping("/get1") public ResultBean get1() { System.out.println("TestController.get1"); return new ResultBean("get1ok"); } @PostMapping("/postJson") public ResultBean postJson(@RequestBody User user) { System.out.println("TestController.postJson"); return new ResultBean("postJson" + user.getName()); } @GetMapping("/getCookie") public ResultBean getCookie(@CookieValue(value = "cookie1") String cookie1) { System.out.println("TestController.getCookie"); return new ResultBean("getCookie" + cookie1); } @GetMapping("/getHeader") public ResultBean getHeader( @RequestHeader("x-header1") String header1, @RequestHeader("x-header2") String header2) { System.out.println("TestController.getHeader"); return new ResultBean("getHeader" + header1+header2); }}2-2 前端项目

代码编写

1.创建名为ajax-client的maven工程pom如下

4.0.0 com.myimooc ajax-client 0.0.1-SNAPSHOT jar ajax-client Demo project for Spring Boot org.springframework.boot spring-boot-starter-parent 2.0.1.RELEASE UTF-8 UTF-8 1.8 org.springframework.boot spring-boot-starter-web org.webjars jquery 3.3.0 org.webjars jasmine 2.5.0 org.springframework.boot spring-boot-maven-plugin

2.编写index.html

Index