前后端分离--vue项目部署到nginx上访问后台出现跨域问题
我的项目前后端分离部署,后台已经配置过cors,但前端访问静态页面没有问题,一旦发请求访问后台服务器时就出现跨域如何解决,有大佬帮忙吗?1.前端访问时:前端项目部署准备用nginx跨域配置为:server {listen80;server_name 118.25.187.60;#charset ...
我的项目前后端分离部署,后台已经配置过cors,但前端访问静态页面没有问题,一旦发请求访问后台服务器时就出现跨域
如何解决,有大佬帮忙吗?
1. 前端访问时:
2. 前端编译代码
访问路径设置带上'/api' --axios.defaults.baseURL = '/api'
config/index.js文件中build配置
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/formula/',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
3. 前端项目部署准备用nginx跨域
配置为:
server {
listen 8888;
server_name localhost;
root /usr/myapp/nginx/dist;
# 项目根目录中指向项目首页
index index.html;
client_max_body_size 20m;
client_body_buffer_size 128k;
# 根请求会指向的页面
location / {
# 此处的 @router 实际上是引用下面的转发,否则在 Vue 路由刷新时可能会抛出 404
try_files $uri $uri/ @router;
# 请求指向的首页
index index.html;
}
# 由于路由的资源不一定是真实的路径,无法找到具体文件
# 所以需要将请求重写到 index.html 中,然后交给真正的 Vue 路由处理请求资源
location @router {
rewrite ^.*$ /index.html last;
}
location /api/ {
# 后端的真实接口
rewrite ^/api/(.*) /$1 break;
proxy_pass http://118.25.187.60:8000/;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Cookie $http_cookie;
# for Ajax
#fastcgi_param HTTP_X_REQUESTED_WITH $http_x_requested_with;
proxy_set_header HTTP-X-REQUESTED-WITH $http_x_requested_with;
proxy_set_header HTTP_X_REQUESTED_WITH $http_x_requested_with;
proxy_set_header x-requested-with $http_x_requested_with;
client_max_body_size 10m;
client_body_buffer_size 128k;
proxy_connect_timeout 90;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_buffer_size 128k;
proxy_buffers 32 32k;
proxy_busy_buffers_size 128k;
proxy_temp_file_write_size 128k;
}
}
~
4.后台springboot
后台配置好了跨域,后台项目访问路径:http://118.25.187.60:8000/
@Bean public CorsFilter corsFilter() { //1.添加CORS配置信息 CorsConfiguration config = new CorsConfiguration(); //1) 允许的域,不要写*,否则cookie就无法使用了 /*List<String> allowedOrigins = prop.getAllowedOrigins(); for (String origin : allowedOrigins) { config.addAllowedOrigin(origin); }*/ //使用方法引用简化上述代码 prop.getAllowedOrigins().forEach(config::addAllowedOrigin); //2) 是否发送Cookie信息 config.setAllowCredentials(prop.getAllowCredentials()); //3) 允许的请求方式 /*config.addAllowedMethod("OPTIONS"); config.addAllowedMethod("GET"); config.addAllowedMethod("PUT"); config.addAllowedMethod("POST"); config.addAllowedMethod("DELETE");*/ //方法引用简化上述代码 prop.getAllowedMethods().forEach(config::addAllowedMethod); // 4)允许的头信息 prop.getAllowedHeaders().forEach(config::addAllowedHeader); // 5) 允许的有效时间 config.setMaxAge(prop.getMaxAge()); //2.添加映射路径,我们拦截一切请求 UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource(); configSource.registerCorsConfiguration(prop.getFilterPath(), config); //3.返回新的CorsFilter. return new CorsFilter(configSource); }
跨域配置
ly: cors: allowedOrigins: - http://118.25.187.60:8000 - http://118.25.187.60:80 - http://118.25.187.60:8001 - http://localhost:8001 - http://localhost:8000 allowCredentials: true allowedMethods: - GET - POST - DELETE - PUT - OPTIONS maxAge: 3600 filterPath: /** allowedHeaders: - "*"
nginx配置好了之后,访问后台仍出现跨域问题
更多推荐
所有评论(0)