Ajax跨域入门01

一、什么是Ajax跨域问题

    前台调用后台服务接口的时候，如果接口不是在同一个域的就会发生跨域问题。

二、模拟跨域请求

    被调用方代码编写

    4.0.0

    vip.fkandy
    demo
    0.0.1-SNAPSHOT
    jar

    demo
    Demo project for Spring Boot

    
        org.springframework.boot
        spring-boot-starter-parent
        2.0.3.RELEASE
         
    

    
        UTF-8
        UTF-8
        1.8
    

    
        
            org.springframework.boot
            spring-boot-starter-web
        

        
            org.springframework.boot
            spring-boot-devtools
            runtime
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        
        
        
            org.projectlombok
            lombok
            1.18.0
            provided
        

    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
        
    

package vip.fkandy;

public class ResultBean {

    private String data;

    public String getData() {
        return data;
    }

    public void setData(String data) {
        this.data = data;
    }

    public ResultBean(String data){
        this.data = data;
    }
}

 

package vip.fkandy;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping(value = "/hello")
public class TestController {
    @GetMapping(value="/test")
    public ResultBean getHello(){
        return new ResultBean("hello");
    }
}

 

package vip.fkandy;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

浏览器访问 http://localhost:8080/hello/test

// 20180715150434
// http://localhost:8080/hello/test

{
  "data": "hello"
}

调用方前台代码编写

    4.0.0

    vip.fkandy
    ajaxclient
    0.0.1-SNAPSHOT
    jar

    ajaxclient
    Demo project for Spring Boot

    
        org.springframework.boot
        spring-boot-starter-parent
        2.0.3.RELEASE
         
    

    
        UTF-8
        UTF-8
        1.8
    

    
        
            org.springframework.boot
            spring-boot-starter-web
        

        
            org.springframework.boot
            spring-boot-devtools
            runtime
        
        
            org.projectlombok
            lombok
            1.18.0
            provided
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
        
    

在static目录下新建inde.html

    
    
    



发生get请求

package vip.fkandy;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class AjaxclientApplication {

    public static void main(String[] args) {
        SpringApplication.run(AjaxclientApplication.class, args);
    }
}

避免端口冲突，将端口修改为8081

server.port=8081

 

访问http://localhost:8081/index.html页面 点击链接 F12查看控制台

 

Failed to load http://localhost:8080/hello/test: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access.

因为在index.html页面访问了http://localhost:8080，因为端口不一致发生了跨域问题。

 

跨域问题产生原因

    1.浏览器限制

    2.跨域    协议， 域名， 端口  任何一个不一样，浏览器就认为是跨域的

    3.XHR(XMLHttpRequest) 只有type为XHR的请求才会发生跨域问题

    三者同时满足才会发生跨域问题。

调用方解决跨域问题(略)

被调用方解决跨域问题

    浏览器都是先执行调用，后进行跨域判断。

    对比普通请求和跨域请求的请求头信息

    普通请求

    

 

跨域请求