精华内容
下载资源
问答
  • VUE部署nginx解决跨域问题
    千次阅读
    2022-04-08 21:59:48

    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;
            }
        }
    

    以上配置就可以解决跨域代理问题

    更多相关内容
  • 众所周知,我们在做前后端分离项目的时候,经常需要在本地起前端工程,接口希望拉取服务端的实际数据而不是本地的mock数据,而如果本地程序直接访问远程接口, 肯定会遇到跨域问题。 什么是跨域?实现跨域的多种方式? ...
  • vue 跨域解决 Linux上部署nginx
  • 2、问题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  localhost

            location / {
                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跨域 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 在开发环境,涉及跨域,就在本地配置了代理,但是部署到服务器上,就不行了。 解决方法有一下几种 服务器端配置CORS 用nginx反向代理,和访问本地服务器是一样的 可以修改成正式线上的地址,再build 推荐 ...
  • 前言: 身为一名前端菜鸟,之前一直未关注后端对于跨域的配置,这不,终于又踩坑了,由于nginx未配置代理转发,所以前端的处理一直都是针对开发环境和生产环境做处理 // 错误 的代理配置,同样启用proxy代理,并在...
  • 1. 需求 本地测试域名与线上域名相同,以便正确传递 Cookie 和进行 SSO 测试...配置 Nginx 进行对应转发: server { listen 80; listen [::]:80; server_name ${product.xxx.xxx.com}; location /api { proxy_p
  • 我的项目前后端分离部署,后台已经配置过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请求存在简单请求和复杂请求两种,具体原理可以去读阮一峰这篇文章,讲解的很明白。出自...
  • vuenginx配置跨域

    千次阅读 2021-11-13 19:47:41
    vue.cofing.js中配置代理规则: module.exports = { // 开启代理服务器 (方式一) // devServer: { // proxy: 'http' // }, // 开启代理服务器 (方式二) devServer: { proxy: { '^/api': { // 匹配...
  • 使用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-elementui-admin模板,后端采用springboot,部署的话是使用nginx代理的;项目中最头痛的问题莫过于开发环境和生产环境的跨域问题了,下面列出我的解决方案: 首先配置vue.config.js...
  • vue.config.js module.exports = { publicPath: './',//打包路径 productionSourceMap: false,//正式优化 // 跨域 devServer: { open: true, //是否自动弹出浏览器页面 proxy: { '/api': { t
  • 1.3、上传 ruoyi 的jar包远程服务器 1.4、运行 jar包 1.5、关闭防火墙 2、前端项目 2.1、打包前端项目 2.2、本地安装 nginx 2.3、配置首页和代理 2.4、nginx 命令 1、后端项目 1.1、已完成内容 redis...
  • 一、前端代码:所有接口前增加 api 前缀,如下 二、nginx 配置 server { listen 1888; ...
  • vuecli3打包部署到nginx跨域问题处理,vuecli3后目录的build和config文件夹都没有了,大部分合成在vue.config.js
  • 跨域问题分为开发和生产环境 开发环境: 不需要Nginx 前端: 在axios封装 module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: '...
  • Vue项目与nginx部署跨域问题

    千次阅读 2018-07-20 16:01:01
    Vue项目部署到nginx上的跨域问题解决 Vue项目的跨域问题:  在使用Vue构建的前端工程中,访问本地不同ip与端口,都会存在跨域问题,下面给出一个使用代理解决的办法:  在config目录的index.js文件中,添加: ...
  • vue+nginx设置跨域

    万次阅读 2019-08-26 10:38:28
    vue项目中的配置 以vue-cli搭建的项目为例, 在webpack配置文件 /config/index.js, 由于我们是在开发环境下使用,自然而然是要配置在dev里面,找到 proxyTable属性,配置如下: dev: { // Paths assetsSubDirectory: ...
  • 使用vue-cli新建一个vue项目 弄个测试的页面调用接口 打包好 使用http-serve将这个打包的vue项目在本地跑起来 使用http://192.168.43.100:8080能打开页面就没有问题了 没有处理的时候点击会出现跨域 ...
  • 总结 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域名...
  • 使用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、如何反向代理后端服务...
  • 现在有两个项目stock,stock_news,想要将这两个项目同时部署到阿里云CentOS服务器 1、前期准备, 安装nginx对于阿里云如何安装nginx,请参考我的另外一片文章《yum方式 阿里云CentOS7+ 安装nginx》 两个项目vue...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,665
精华内容 3,066
关键字:

vue部署到nginx跨域问题