做毕设的时候发现了这个问题,跨域问题还是比较常见的,简单的记录下我的解决方法吧
一、跨域问题发生的情况?
- 域名不同
- 域名相同端口不同
二、解决方法
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配置官方教程:
tips: 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攻击就是说攻击者盗用了你的身份,以你的名义发送恶意请求。