React和spring boot的前後端跨域數據交互

前端：

工具：vs code
框架：react
index.js代碼如下：

import React from 'react';
import ReactDOM from 'react-dom';
import $ from  'jquery';
import './index.css';
//import { Redirect } from 'react-router-dom';
let exampleStyle={
    background:"skyblue"
}
export default class Login extends React.Component{
    constructor(props){
        
        super(props)
        //構造函數進行初始化，將需要改變的數據初始化到state中
        this.state={
            username:'',
            password:''
        }
    }
    handleInput(){
        var username = $("#username").val();
        var password = $("#password").val();
        this.setState({
            username:username,
            password:password
        })
    }
    handleLogin(){
        let {username,password} = this.state
        console.log(username,password)
        //alert(1)
        $.ajax({
            url:"/user/login",
            dataType:"json",
            type:"POST",
            data:{username:username,password:password},
            success:function(result){
                    alert(result.message)
            }

        })
    }
    render(){
        return(
            <div align="center" style={exampleStyle}>
                <h1>歡迎登陸本系統</h1>
            <div align="center">
                賬號：<input placeholder='請輸入用戶名' id="username" type="text" defaultValue={this.state.username} onChange={this.handleInput.bind(this)}></input><br/><br/>
                密碼：<input placeholder='請輸入密碼' id="password" type="password"  defaultValue={this.state.password} onChange={this.handleInput.bind(this)}></input><br/><br/>
                <button onClick={this.handleLogin.bind(this)}>登陸</button>
            </div>  
            </div> 
        )
    }
}
ReactDOM.render(<Login/>,document.querySelector('#root'))

後端：

工具：idea
框架：spring boot
代碼如下：
pojo類：

public class Users {
    private Integer id;
    private String username;
    private String password;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public Users(Integer id, String username, String password) {
        this.id = id;
        this.username = username;
        this.password = password;
    }

    public Users() {
    }

    @Override
    public String toString() {
        return "Users{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

Result工具類：

public class Result {
    private Integer code;
    private Boolean flag;
    private String message;
    private Object object;

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public Boolean getFlag() {
        return flag;
    }

    public void setFlag(Boolean flag) {
        this.flag = flag;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public Object getObject() {
        return object;
    }

    public void setObject(Object object) {
        this.object = object;
    }

    public Result() {
    }

    public Result(Integer code, Boolean flag, String message, Object object) {
        this.code = code;
        this.flag = flag;
        this.message = message;
        this.object = object;
    }

    public Result(Integer code, Boolean flag, String message) {
        this.code = code;
        this.flag = flag;
        this.message = message;
    }

    public Result(Integer code, Boolean flag, Object object) {
        this.code = code;
        this.flag = flag;
        this.object = object;
    }

    public Result(Integer code, String message, Object object) {
        this.code = code;
        this.message = message;
        this.object = object;
    }

    public Result(Integer code, Boolean flag) {
        this.code = code;
        this.flag = flag;
    }

    @Override
    public String toString() {
        return "Result{" +
                "code=" + code +
                ", flag=" + flag +
                ", message='" + message + '\'' +
                ", object=" + object +
                '}';
    }
}

配置文件application.properties：

#配置訪問端口，路徑
server.port=8080
#配置數據源
spring.datasource.url=jdbc:mysql://localhost:3306/react?serverTimezone=Asia/Shanghai
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
#配置編碼格式
spring.http.encoding.charset=UTF-8
spring.http.encoding.enabled=true
spring.http.encoding.force=true
#配置*Mapper.xml路徑
mybatis.mapper-locations=classpath:/mapper/**

mapper層：
UserLoginMapper：

@Mapper
public interface UserLoginMapper {
    Users UserLogin(Users user);
}

UserLoginMapper.xml：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.hjx.mapper.UserLoginMapper">
    <!--註冊前，查詢該賬號是否被註冊過-->
    <select id="UserLogin" resultType="com.hjx.pojo.Users" parameterType="com.hjx.pojo.Users">
        select * from users where username=#{username} and password=#{password}
  </select>
</mapper>

service層
UserLoginServiceImpl：

@Service
public class UserLoginServiceImpl implements UserLoginService {
    @Autowired
    private UserLoginMapper userLoginMapper;
    @Override
    public Result UserLogin(Users user) {
        Users users = userLoginMapper.UserLogin(user);
        System.out.println("-----------------------------------");
        if(users==null){
            return new Result(200,false,"賬號或密碼輸入錯誤");
        }else{
            return new Result(100,true,"登錄成功");
        }
    }
}

controller層
UserLoginController：

@Controller
@RequestMapping("/user")
public class UserLoginController {
    @Autowired
    private UserLoginService userLoginService;

    @ResponseBody
    @RequestMapping(value = "/login",method = RequestMethod.POST)
    public Result userLogin(Users user){
       return userLoginService.UserLogin(user);
    }
}

代碼完結後，可是出現一個問題：
前端訪問路徑爲：http://localhost:3000/
後端訪問路徑爲：http://localhost:8080/user/login
在這裏出現了跨域問題！！！

那麼什麼是跨域呢？

當一個請求url的協議、域名、端口三者之間任意一個與當前頁面url不同即爲跨域
詳見表格：

當前頁面url	被請求頁面url	是否跨域	原因
http://www.demo.com/	http://www.demo.com/index.html	否	同源（協議、域名、端口號相同）
http://www.demo.com/	https://www.demo.com/index.html	跨域	協議不同（http/https）
http://www.demo.com/	http://www.baidu.com/	跨域	主域名不同（test/baidu）
http://www.demo.com/	http://blog.demo.com/	跨域	子域名不同（www/blog）
http://www.demo.com:8080/	http://www.demo.com:7001/	跨域	端口號不同（8080/7001）

那麼如何解決跨域問題呢？
方法有多種
在這裏我介紹的是通過nginx反向代理實現

Windows下安裝nginx

①下載地址：http://nginx.org/en/download.html

②然後解壓到自己的一個目錄
③啓動：打開cmd命令窗口，切換到nginx目錄下，輸入命令 nginx.exe 或者 start nginx ，回車即可
④檢查nginx是否啓動成功
直接在瀏覽器地址欄輸入網址 http://localhost:80，回車，出現以下頁面說明啓動成功

打開nginx文件目錄，找到nginx.conf
修改location /{}代碼

改爲你想要訪問的路徑：

 listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            proxy_pass http://158.209.9.78:3000;
        }
       location /user/login {
            proxy_pass http://158.209.9.78:8080/user/login;
        }

解釋：以上配置，當你訪問http://localhost:80時，實際上瀏覽器訪問的是http://158.209.9.78:3000，當訪問http://158.209.9.78:3000/user/login時，其實訪問的就是http://158.209.9.78:8080/user/login，這樣就解決了端口不一致的跨域問題了