-
2022-04-08 21:59:48
VUE部署nginx解决跨域问题
Vue的代理跨域问题,需要确定的是在开发阶段可以使用,部署到服务器后出现请求失败的问题(404),如下图。
这是因为VUE在打包的过程中并没有把代理配置也进行打包,需要配置跨域代理,这里我使用的是服务器是nginx代理实现跨域问题。先去百度上下载一个nginx,然后进入conf目录,打开nginx.txt配置文件,
找到如下配置VUE配置的代理
devServer: { proxy: { '/request': { //以request后缀请求 target: '地址:端口', //转发地址 ws: true, pathRewrite:{'^/request':'/'}, //把request 替换成/ changeOrigin: true } } }
转换到对应的服务器的配置跨域如下
server { listen 80; server_name localhost; #匹配请求头为 request,把request 换成/ 然后提交proxy_pass http这个指定地址 location ^~/request/ { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; add_header Access-Control-Allow-Credentials true; proxy_set_header X-NginX-Proxy true; rewrite ^(.*)request(.*)$ $1/$2; break; #root html/dist; proxy_pass http:这里是你的后台地址:端口号; index index.html index.htm; } #匹配以/的请求 然后跳转到指定目录, location / { #我这里是指定的是nginx的html目录下的项目 root html/dist; index index.html index.htm; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }
以上配置就可以解决跨域代理问题
更多相关内容 -
Vue中跨域及打包部署到nginx跨域设置方法
2021-01-19 16:59:19众所周知,我们在做前后端分离项目的时候,经常需要在本地起前端工程,接口希望拉取服务端的实际数据而不是本地的mock数据,而如果本地程序直接访问远程接口, 肯定会遇到跨域问题。 什么是跨域?实现跨域的多种方式? ... -
nginx部署步骤,vue解决跨域
2020-05-12 10:02:59vue 跨域解决 Linux上部署nginx -
vue打包后部署到nginx,跨域问题解决
2021-10-08 20:20:012、问题:vue打包后的静态页面和文件直接由nginx代理访问没有问题,但是请求接口时是请求不到的。 3、解决方案: a)配置nginx: server { listen 80; server_name localhost location / { root D:/static; #...1、目的:vue+springboot 开放的同学,使用nginx代理,实现前后台分离部署
2、问题:vue打包后的静态页面和文件直接由nginx代理访问没有问题,但是请求接口时是请求不到的。
3、解决方案:
a)配置nginx:
server {
listen 80;
server_name localhostlocation / {
root D:/static; #vue工程打包后的文件路径
index index.html;
}
location /api{ # 会将接口地址/api开头的全部替换文下边配置的地址
proxy_pass http://localhost:8081/; #接口服务地址 配置跨域
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}b)vue 打包配置:
配置var baseUrl = '/api';
保证打包后,请求的接口地址以/ws 开头
4、结果:
请求成功。
-
vue项目打包部署nginx跨域
2021-06-02 16:49:22vue项目打包部署nginx跨域 vue项目连接外部api接口时,打包部署到nginx后出现api404,api跨域问题,这个时候需要给vue项目本身进行跨域,再配置nginx中进行跨域即可解决,详见下文。 1. 首先给vue项目加上跨域【使用...vue项目打包部署nginx跨域
vue项目连接外部api接口时,打包部署到nginx后出现api404,api跨域问题,这个时候需要给vue项目本身进行跨域,再配置nginx中进行跨域即可解决,详见下文。
1. 首先给vue项目加上跨域【使用外部api时】
在vue项目中index.js文件中加上代理操作。
这里的【target】是我们需要跨域的api路径(接口路径),下面的【"^api"】直接为空。
上图为 我自己添加的【test.env.js】配置文件,主要在测试环境使用,这里直接把 API_HOST 替换为【’"/api"’】,注意是单引号-------双引号。到此,我们vue项目中的代理就已经做好了。
2. 在nginx.conf中配置代理
在nginx文件夹中有一个conf文件夹,打开后进行编辑nginx.conf配置文件。
进行添加此配置,proxy_pass http://*********;这里需要注意【proxy_pass后面有一个空格】。注意:如果报【nginx: [emerg] unknown directive “?” in /usr/local/nginx/conf/nginx.conf:2】此错误,请检查nginx.conf的格式是否是UTF-8。
3. 重启nginx
进入 nginx 文件夹中的 sbin 文件中执行【./nginx -s reload】命令即可。
如有其他疑问,可以在下方评论区留言,一起解决。
-
vue打包使用Nginx代理解决跨域问题
2020-12-09 01:19:05vue 在开发环境,涉及跨域,就在本地配置了代理,但是部署到服务器上,就不行了。 解决方法有一下几种 服务器端配置CORS 用nginx反向代理,和访问本地服务器是一样的 可以修改成正式线上的地址,再build 推荐 ... -
vue proxy代理 + nginx 处理跨域
2021-01-03 14:21:41前言: 身为一名前端菜鸟,之前一直未关注后端对于跨域的配置,这不,终于又踩到坑了,由于nginx未配置代理转发,所以前端的处理一直都是针对开发环境和生产环境做处理 // 错误 的代理配置,同样启用proxy代理,并在... -
利用Nginx处理Vue开发环境的跨域的方法
2021-01-11 01:38:401. 需求 本地测试域名与线上域名相同,以便正确传递 Cookie 和进行 SSO 测试...配置 Nginx 进行对应转发: server { listen 80; listen [::]:80; server_name ${product.xxx.xxx.com}; location /api { proxy_p -
前后端分离--vue项目部署到nginx上访问后台出现跨域问题
2020-02-23 14:04:25我的项目前后端分离部署,后台已经配置过cors,但前端访问静态页面没有问题,一旦发请求访问后台服务器时...前端项目部署准备用nginx跨域 配置为: server { listen 80; 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配置好了之后,访问后台仍出现跨域问题
-
vue项目打包部署在nginx跨域访问问题
2019-01-22 18:23:21由于浏览器的同源策略,vue项目上线时要部署在服务器,访问webserver时会出现跨域访问问题。 http请求存在简单请求和复杂请求两种,具体原理可以去读阮一峰这篇文章,讲解的很明白。出自... -
vue中nginx配置跨域
2021-11-13 19:47:41在vue.cofing.js中配置代理规则: module.exports = { // 开启代理服务器 (方式一) // devServer: { // proxy: 'http' // }, // 开启代理服务器 (方式二) devServer: { proxy: { '^/api': { // 匹配... -
vue.js使用代理和使用Nginx来解决跨域的问题
2020-11-27 21:15:40使用Nginx 反向代理解决跨域问题(vue.js使用代理去掉vue.js因为跨域而触发的options请求) 我们的项目还是需要node.js作为容器的 一、Windows 下安装Nginx (官网下载稳定版http://nginx.org/en/download.html) 二... -
vue项目部署的跨域问题解决
2022-04-26 09:52:04跨域问题在前后端分离项目很常见,至于为什么会跨域,同源策略,百度各种博客都很详细,这里不再介绍,主要记录项目中的各种设置,解决的过程。 首先是后端: 过滤器: @Configuration public class ... -
vue+springboot+nginx跨域问题解决方案
2020-09-23 14:43:12最近项目改版,前端使用了vue-elementui-admin模板,后端采用springboot,部署的话是使用nginx代理的;项目中最头痛的问题莫过于开发环境和生产环境的跨域问题了,下面列出我的解决方案: 首先配置vue.config.js... -
vue项目打包之后放到服务器nginx上跨域问题
2021-03-21 13:47:45vue.config.js module.exports = { publicPath: './',//打包路径 productionSourceMap: false,//正式优化 // 跨域 devServer: { open: true, //是否自动弹出浏览器页面 proxy: { '/api': { t -
Vue前端项目-上线部署-nginx代理解决跨域问题
2020-04-20 00:11:321.3、上传 ruoyi 的jar包到远程服务器 1.4、运行 jar包 1.5、关闭防火墙 2、前端项目 2.1、打包前端项目 2.2、本地安装 nginx 2.3、配置首页和代理 2.4、nginx 命令 1、后端项目 1.1、已完成内容 redis... -
vue 前端项目部署,nginx 跨域配置(nginx跨域效率最高,推荐使用)
2020-10-29 11:44:00一、前端代码:所有接口前增加 api 前缀,如下 二、nginx 配置 server { listen 1888; ... -
vuecli3打包部署到nginx.md
2019-07-25 16:19:28vuecli3打包部署到nginx,跨域问题处理,vuecli3后目录的build和config文件夹都没有了,大部分合成在vue.config.js -
Vue Springboot Nginx跨域问题
2020-08-26 11:51:08跨域问题分为开发和生产环境 开发环境: 不需要Nginx 前端: 在axios封装 module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: '... -
Vue项目与nginx部署跨域问题
2018-07-20 16:01:01Vue项目部署到nginx上的跨域问题解决 Vue项目的跨域问题: 在使用Vue构建的前端工程中,访问本地不同ip与端口,都会存在跨域问题,下面给出一个使用代理解决的办法: 在config目录的index.js文件中,添加: ... -
vue+nginx设置跨域
2019-08-26 10:38:28vue项目中的配置 以vue-cli搭建的项目为例, 在webpack配置文件 /config/index.js, 由于我们是在开发环境下使用,自然而然是要配置在dev里面,找到 proxyTable属性,配置如下: dev: { // Paths assetsSubDirectory: ... -
mac电脑vue+node+nginx本地部署解决跨域问题
2022-01-25 11:34:32使用vue-cli新建一个vue项目 弄个测试的页面调用接口 打包好 使用http-serve将这个打包的vue项目在本地跑起来 使用http://192.168.43.100:8080能打开页面就没有问题了 没有处理的时候点击会出现跨域 ... -
vue反向代理解决跨域及部署nginx端口转发解决跨域
2021-11-13 11:18:54总结 vue反向代理以及部署项目到nginx解决跨域的内容讲到这里了,希望可以帮助到大家,大家如果在项目中遇到类似问题了,可以参考一下,是否和我的问题一样。文章内容,有些是摘自于互联网,整理得来的。不忘大佬们... -
Nginx反向代理处理vue项目部署跨域问题
2021-08-26 19:22:31线上部署官网项目时,提示域名存在跨域问题,首先想到的是用Nginx来处理这个问题,处理流程如下: A:www.test.com 【网站访问域名】 B:open.test.com 【前端请求接口域名】 C:open.test.com/site/index 【B域名... -
Vue部署到服务器解决跨域问题
2021-04-09 16:52:27使用nginx搭建 在nginx中找到配置文件添加以下代码即可。 /api/ 为你VUE配置的跨域配置目标地址 location /api/ { rewrite ^/b/(.*)$ /$1 break; proxy_pass http://你跨域的地址/; } -
linux nginx部署vue项目 实现跨域
2019-11-14 11:47:27最近有时间研究了下前端项目如何在nginx服务器下进行部署,折腾了两天总算有所收获,汗~~ 所以就想着写篇文章来总结一下,主要包括以下三个方面: 1、打包好的vue项目如何进行部署。 2、如何反向代理后端服务... -
阿里云 两个vue项目部署到nginx,并同时实现跨域请求
2019-12-15 23:18:41现在有两个项目stock,stock_news,想要将这两个项目同时部署到阿里云CentOS服务器 1、前期准备, 安装nginx对于阿里云如何安装nginx,请参考我的另外一片文章《yum方式 阿里云CentOS7+ 安装nginx》 两个项目vue...