[Java知识库]Vue-cli3+Springboot解决跨域的问题

????????在使用Vue+Springboot框架，前后端分离时，我们会遇到跨域的问题，也就是当你前端发送请求的时候，会报错：

Access to XMLHttpRequest at ‘http://xxxx.com/xxx’ from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

当在网页的控制台（console）上显示这个错误的时候就是出现跨域的问题了

那么跨域问题是什么呢？

跨域问题就是浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域

那么在这个框架下我们怎么解决跨域问题呢？

1、首先需要在vue-config.js里面的proxy里面添加配置，具体vue-config.js文件的配置，在我的另一篇文章中有讲解，附上链接：https://blog.csdn.net/weixin_51043896/article/details/119548881?spm=1001.2014.3001.5501

这里就讲proxy里面的配置了

devServer: {
        /* 自动打开浏览器 */
        open: false,
        /* 设置为0.0.0.0则所有的地址均能访问 */
        host: '0.0.0.0',
        port: 8080,
        https: false,
        hotOnly: false,
        /* 使用代理 */
        proxy: {
            '/api': {
                target: 'http://localhost:8443', //后端地址
                ws: true,//是否代理websockets
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },

其中第一个api相当于 "/api"=="http://localhost:8443"，相当于一个替代作用，“/api"等价于target

然后changeOrigin就是用来设置跨域的，当写上true就表示允许跨域。

第二个api,举个例子前端axios发送的请求到"/addbook"，后端如果要接收则需要写"api/addbook"

例如PostMapping（value = ”api/addbook"）这样才可以处理前端发出的请求

以上是前端的配置

后端的配置就简单一点除了必要的@ResponseBody注解以外还要加上@CrossOrigin，在你需要跨域的方法或者类上加上这个注解就可以实现跨域的功能了。

代码展示

@Controller
@CrossOrigin
public class borrowController {
    @Autowired
    borrowService borrowService;
    @PostMapping(value = "api/borrow")
    @ResponseBody
    public Result borrow(@RequestBody bookBorrowing requestb) {
        bookBorrowing bookBorrowing = new bookBorrowing();
        bookBorrowing.setStudentCode(requestb.getStudentCode());
        bookBorrowing.setBookName(requestb.getBookName());
        bookBorrowing.setBorrowDate(requestb.getBorrowDate());
        if (bookBorrowing.getStudentCode() != null && bookBorrowing.getBookName() != "") {
            borrowService.add(bookBorrowing);
            return new Result(200);
        } else {
            return new Result(400);
        }
    }

如果有什么说得不够清楚或者说的不对，还请各位补充和斧正~~