常用解决跨域问题的方案
后端配置cors
/**
* 使用CORS解决跨域问题
* @author rsw
*/
@Configuration
public class GlobalCorsConfig {
@Bean
public CorsFilter corsFilter() {
//1.添加CORS配置信息
CorsConfiguration config = new CorsConfiguration();
//1) *默认所有ip和端口都可以访问,也可以设置固定
config.addAllowedOrigin("*");
//2) 是否发送Cookie信息
config.setAllowCredentials(true);
//3) 允许的请求方式
config.addAllowedMethod("OPTIONS");
config.addAllowedMethod("HEAD");
config.addAllowedMethod("GET");
config.addAllowedMethod("PUT");
config.addAllowedMethod("POST");
config.addAllowedMethod("DELETE");
config.addAllowedMethod("PATCH");
// 4)允许的头信息
config.addAllowedHeader("*");
// 5)有效时长
config.setMaxAge(3600L);
//2.添加映射路径,我们拦截一切请求
UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
configSource.registerCorsConfiguration("/**", config);
//3.返回新的CorsFilter.
return new CorsFilter(configSource);
}
}
前端问题
vue官方提供的解决跨域问题是配置代理。
其实这样配置一般就可以解决前端的跨域问题,但是当时不知道怎么的就在vue.config.js配置了代理,代理配置如下:
module.exports = {
"transpileDependencies": [
"vuetify"
],
publicPath: './', //vue3 解决部署到服务器白屏问题 '/' => ''
outputDir:'dist',
devServer: {
// 项目运行时候的端口号
host: "127.0.0.1",
port: 8089,
proxy: {
'/api': {
target: 'http://118.89.143.27:8090',//后台接口
ws: true, //如果要代理websockets
secure:false, // 使用的是http协议则设置为false,https协议则设置为true
changeOrigin: true, //将选项changeOrigin设置true为基于名称的虚拟托管站点。
pathRewrite: { //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
'^/api': '/api'
}
}
}
},
//警告 webpack 的性能提示
configureWebpack : {
performance: {
hints:'warning',
//入口起点的最大体积 整数类型(以字节为单位)
maxEntrypointSize: 50000000,
//生成文件的最大体积 整数类型(以字节为单位 300k)
maxAssetSize: 30000000,
//只给出 js 文件的性能提示
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.js');
}
}
}
};
proxy配置主要是将8089端口代理到8090后端端口
在本地运行没有问题,但是部署到服务器上,访问后端接口状态是200,但是放回数据有问题,显示“”“We're sorry but XX doesn't work properly without JavaScript enabled”
百度了很多关于这个问题的解决方式,主要有两种,一个是修改publicPath
,另一种是修改nginx的配置,但是都不起作用。
最后经过各种尝试,才发现是proxy
的代理问题
解决
删除proxy
的代理配置,并配置axios的默认路径即可解决:
axios.defaults.baseURL = 'http://服务器ip:8090/api';
后端配置跨域,前端其实可以不进行配置也可以。