SpringBoot+Vue前后端分离之Cors解决方案

朱雀 2023-07-20 10:38 131阅读 0赞

做毕设的时候发现了这个问题，跨域问题还是比较常见的，简单的记录下我的解决方法吧

一、跨域问题发生的情况？

1.  域名不同
2.  域名相同端口不同

二、解决方法

1、Vue项目配置代理解决

*  (基于vue-cli2.0的项目)
    
    打开config/index.js,在proxyTable中添写如下代码,具体配置如下:

proxyTable: {
          '/': {
            //配置请求转发,需要跨域的API地址
            target: 'http://localhost:8080/',
            changeOrigin: true,
            secure:false,
            //路径重写
            pathRewrite: {
              '^/': ''
            }
          },
        },

*  (基于vue-cli3.0的项目)
    
    在项目根目录创建vue.config.js,具体配置如下:

let proxyObj = {};
    
    proxyObj['/'] = {
        target: 'http://localhost:8080/',
        changeOrigin: true,
        pathRewrite: {
            '^/': ''
        }
    }
    module.exports = {
        devServer: {
            /* 项目启动自动在浏览器打开 */
            open: true,
            host: 'localhost',
            port: 80,
            proxy: proxyObj,
        },
    }

*  **局限:** 以上配置仅限在本地开发环境中使用

Webpack配置官方教程:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjY0OTk5_size_16_color_FFFFFF_t_70]

tips: [https://webpack.docschina.org/configuration/dev-server/\#devserver-proxy][https_webpack.docschina.org_configuration_dev-server_devserver-proxy]  
2、SpringBoot后端配置

作为一个Java攻城狮，当然考虑的是从后端解决啦

*  在需要跨域的Controller上或方法上添加@CrossOrigin

@RestController
    @RequestMapping("/authorization")
    @CrossOrigin(value = "http://localhost:80")
    public class AuthorizationInfoController {
    
        private final IAuthorizationInfoService authorizationInfoService;
    
        @Autowired
        public AuthorizationInfoController(IAuthorizationInfoService authorizationInfoService) {
            this.authorizationInfoService = authorizationInfoService;
        }
    
        @GetMapping("/{id}")
        @CrossOrigin(value = "http://localhost:80")
        public ResponseEntity<AuthorizationInfo> getAuthorizationInfoById(@PathVariable("id") Integer id){
            AuthorizationInfo authorizationInfo = authorizationInfoService.getAuthorizationInfoById(id);
            return ResponseEntity.ok(authorizationInfo);
        }
    }

*  在Spring Boot中，其实可以通过全局配置解决这个问题，全局配置只需要在配置类中重写addCorsMappings方法即可，如下：

package cn.waggag.config;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    /**
     * @description: 配置跨域
     * @author: waggag
     * @Date: 2020/4/1 0:19
     * @Company: http://waggag.cn/
     */
    @Configuration
    public class WebMvcConfig implements WebMvcConfigurer {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")   //所有方法都做处理跨域
                    .allowedOrigins("http://localhost:80")  //允许跨域的请求头
                    .allowedMethods("*")  //润许通过地请求方法
                    .allowedHeaders("*");  //允许的请求头
        }
    }

\*\*tips: \*\*当然，本人更倾向于后端解决问题！！！

3、允许跨域存在的安全问题

--------------------

CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF，我们跨域方便了，但是会遭受CSRF攻击，其实CSRF攻击就是说攻击者盗用了你的身份，以你的名义发送恶意请求。

--------------------

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjY0OTk5_size_16_color_FFFFFF_t_70]: /images/20230528/b9c11810dd9b4a239c61e7adea544879.png
[https_webpack.docschina.org_configuration_dev-server_devserver-proxy]: https://webpack.docschina.org/configuration/dev-server/#devserver-proxy