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(
欢迎登陆本系统
账号：
密码：
)
}
}
ReactDOM.render(后端：
工具：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：
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，这样就解决了端口不一致的跨域问题了