前后端分离跨域访问尝试

最新推荐文章于 2023-04-18 01:15:11 发布

ReactSpring

最新推荐文章于 2023-04-18 01:15:11 发布

阅读量532

点赞数

分类专栏：前后端分离尝试

本文链接：https://blog.csdn.net/weixin_45607293/article/details/119356768

版权

前后端分离尝试专栏收录该内容

1 篇文章 1 订阅

订阅专栏

因为一直想做前后端分离的项目，奈何学完了SpringBoot后还是不知道前后端分离项目应该怎么做，所以我做了一些小尝试，使用SpringBoot来搭建一个简单的后台,提供接口让前端页面进行访问。

这里我的前端页面使用最原始的HTML页面来做测试，因为简单。理论上只要我后端通过@RequestMapping注解写的一个接口URL地址可以将数据以JSON的形式传送到前端页面，前端页面使用JQuery的$.ajax()方法就可以访问这个URL地址，然后获取到我返回的JSON数据，存储到data里面然后就是前端的页面渲染工作了，理论上我的理解前后端分离大概的流程就是这样的。但是这里有个致命的问题，那就是跨域问题，我经过查阅大量的资料得知，解决跨域问题有两大类方法，分别通过前端JavaScript解决和后端Java代码来解决。我这里展示一种Java代码的方式。

我使用的是SpringBoot搭建后台

搭建一个简单的SpringBoot框架
配置Config,放在configuration包里面

package edu.linnan.configuration;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("*");
    }
}

写一个Controller来测试是否可以跨域访问

package edu.linnan.controller;

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

@RestController
@RequestMapping("/hello")
public class HelloController {

    @RequestMapping("/world")
    public String hello(){
        return "hello";
    }
}

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="app"></div>
<input type="button" value="GET" onclick="getData()"/>
<script>
    function getData(){
        $.get('http://localhost:8080/hello/world',function(msg){
            document.write(msg);
        });
    }
</script>
</body>
</html>

在这里插入图片描述
点击GET,访问成功!

ReactSpring

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前后端分离跨域访问尝试

因为一直想做前后端分离的项目，奈何学完了SpringBoot后还是不知道前后端分离项目应该怎么做，所以我做了一些小尝试，使用SpringBoot来搭建一个简单的后台,提供接口让前端页面进行访问。这里我的前端页面使用最原始的HTML页面来做测试，因为简单。理论上只要我后端通过@RequestMapping注解写的一个接口URL地址可以将数据以JSON的形式传送到前端页面，前端页面使用JQuery的$.ajax()方法就可以访问这个URL地址，然后获取到我返回的JSON数据，存储到data里面然后就是前端的页
复制链接

扫一扫