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，这样就解决了端口不一致的跨域问题了