精华内容
下载资源
问答
  • 众所周知,我们在做前后端分离项目的时候,经常需要在本地起前端工程,接口希望拉取服务端的实际数据而不是本地的mock数据,而如果本地程序直接访问远程接口, 肯定会遇到跨域问题。 什么是跨域?实现跨域的多种方式? ...
  • Vue项目与nginx部署跨域问题

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

    目录

    Vue项目的跨域问题:

    Vue项目部署到nginx上的跨域问题解决


    Vue项目的跨域问题:

        在使用Vue构建的前端工程中,访问本地不同ip与端口,都会存在跨域问题,下面给出一个使用代理解决的办法:

        在config目录的index.js文件中,添加:

        

        proxyTable: {
          '/api':{
            target:'https://api.douban.com',
            changeOrigin: true,
            pathRewrite: {
              '^/api': ''
            }
          }
        }

       在要访问该地址的时候这样写:

       

          axios.get('/api/v2/book/1220562').then(resp=>{
            console.log(resp)
          })

        原来的url是:https://api.douban.com/api/v2/book/1220562,现在就不应该这样写了。

        问题解决。

    Vue项目部署到nginx上的跨域问题解决

        这还没完,现在我们要将项目部署到nginx上,此时原来可以访问的接口又访问不到了,所以这个时候还要对nginx进行设置。

    		location /api {			
    			proxy_pass https://api.douban.com/;			
    			
    		} 

        在nginx.conf文件的server节点下,加上以上代码即可。

    展开全文
  • vuecli3打包部署到nginx跨域问题处理 一、vuecli3后目录的build和config文件夹都没有了,大部分合成在vue.config.js,具体配置看 https://cli.vuejs.org/zh/config 其中常见的跨域处理: devServer: { proxy: {...

    vuecli3打包部署到nginx,跨域问题处理

    一、vuecli3后目录的build和config文件夹都没有了,大部分合成在vue.config.js,具体配置看 https://cli.vuejs.org/zh/config
    1. 其中常见的跨域处理:
    devServer: {
       proxy: {
         '^/proxy': {
           target: 'http://127.0.0.1:8100',
           changeOrigin: true,
           pathRewrite: {
             '^/proxy': ''
           }
         },
       }
     },
    
    1. 接口请求:
    Vue.http.post(`${/proxy}/login/auth`).then()
    
    1. 打包:
      npm run build
    二、打包后访问会出现跨域问题,接下来使用Nginx反向代理实现ajax进行跨域访问:
    1. 首先去nginx下载http://nginx.org/en/download.html,解压到文件夹中(不含中文)
    2. 接着打开conf文件夹,右键选择nginx.conf编辑
    3. 编辑server内容为↓
    server {
            listen       8085;#监听端口
            server_name  localhost;#代理服务地址
    
            add_header Access-Control-Allow-Origin *;
    
            location / {
                root H:/newCom/ofpms/static; #根目录!!,把这里路径设置为项目的根路径
                autoindex on;       #开启nginx目录浏览功能
                autoindex_exact_size off;   #文件大小从KB开始显示
                charset utf-8;          #显示中文
                add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址
                add_header 'Access-Control-Allow-Credentials' 'true';
                add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式
                add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
            }
    
            #开始配置我们的反向代理
            location /proxy{
               rewrite ^/proxy/(.*)$ /$1 break;
               include uwsgi_params;
               proxy_set_header   Host             $host;
               proxy_set_header   x-forwarded-for  $remote_addr;
               proxy_set_header   X-Real-IP        $remote_addr;
               proxy_pass  http://127.0.0.1:8100;
            }
    
            location @router {
                rewrite ^.*$ /index.html last;
            }
        }
    
    1. 再把打包好的文件夹放到nginx下的html文件夹里
    常见nginx命令:

    start nginx.exe //启动nginx
    nginx.exe -s reload //重载配置
    nginx.exe -s stop //快速停止
    nginx.exe -s quit //完整有序停止

    如果已经打开Nginx,请使用命令重载配置,①停止->②重载配置->③启动

    nginx: [error] CreateFile() “E:\nginx\nginx-1.9.3/logs/nginx.pid” failed
    nginx: [error] Open() “E:\nginx\nginx-1.9.3/logs/nginx.pid” failed
    解决方法:
    使用命令创建/logs/nginx.pid文件:
    nginx -c conf/nginx.conf


    在浏览器中输入 http://localhost:8085/即可实现跨域访问

    展开全文
  • vue打包后部署到nginx,跨域问题解决

    千次阅读 2020-03-18 17:05:40
    1、目的:vue+springboot...2、问题vue打包后的静态页面和文件直接由nginx代理访问没有问题,但是请求接口时是请求不的。 3、解决方案: a)配置nginx: server { listen 80; server_name localhost locati...

    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-elementui-admin模板,后端采用springboot,部署的话是使用nginx代理的;项目中最头痛的问题莫过于开发环境和生产环境的跨域问题了,下面列出我的解决方案: 首先配置vue.config.js...

    最近项目改版,前端使用了vue-elementui-admin模板,后端采用springboot,部署的话是使用nginx代理的;项目中最头痛的问题莫过于开发环境和生产环境的跨域问题了,下面列出我的解决方案:

    首先配置vue.config.js文件,这是配置proxy做路径跳转,api和ams分别是项目的别名(注意:这里配置两个项目跳转路径还方便了有多个微服务的项目使用,不同的项目进行不同的配置即可),可以按照自己的喜好取,后面会讲到他们具体用在什么地方

     proxy: {
        '/api': {
          target: 'http://localhost:8091/',
          changeOrigin: true,
          ws:true,
          pathRewrite: {
            '^/api': ''
          }
        },
        '/ams': {
          target: 'http://localhost:8092/',
          changeOrigin: true,
          ws:true,
          pathRewrite: {
            '^/ams': ''
          }
        },
      },
      before: require('./mock/mock-server.js')
    },

    然后在src/util/request.js配置baseURL,这里我们配置"/"或者""都可以,意思是不在基础路径后面添加任何其他路径,若不存在多个微服务也可以在这里配置单个微服务的proxy里的别名例如"/api",那么其他请求接口里面就无需再做配置了

    最后一步,配置每个请求的项目路径,在api包下面的每个需要发请求的地方配置

    import request from '@/utils/request'
    
    
    export function getRoutes(username) {
      return request({
        url: '/api/auth/loadRoutes',
        method: 'get',
        params: { "username":username }
      })
    }
    
    export function fetchList(query) {
      return request({
        url: '/ams/goods/queryGoods',
        method: 'get',
        params: query
      })
    }
    
    
    

    每个url的前面部分都是我们在vue.config.js里面进行配置的项目别名,springboot的后台的接口就只要配置项目别名后的路径即可

    例如auth/loadRoute这个请求,后台controller是这样写的:

    这样配置好了的话,我们开发环境的跨域问题就得到解决了,下面讲一下部署到服务器后的跨域解决方案。

    我们使用的nginx部署vue项目(nginx安装与vue项目的打包还有springboot项目部署这里就不细说,网上方法很多),我这里用的是nginx1.16.1,在官网下载安装包即可,只需配置conf包下的nginx.conf文件即可,具体配置如下:

    server {
            listen       9000;   //vue项目的访问端口
            server_name  localhost;//访问地址
    		
            location / {
                    root D:/tomcat/dist; //vue项目的部署路径
    				index index.html index.htm;
            }
    		
    		 location ^~ /api/ {
                rewrite  ^/api/(.*)$ /$1 break;
    			proxy_pass http://localhost:8091;	//api项目的访问地址,这里我的所有项目和nginx都是同一台服务器,若不同服务器请根据实际情况修改
    		}
    		
    		location ^~ /ams/ {
                rewrite  ^/ams/(.*)$ /$1 break;		 
    			proxy_pass http://localhost:8092;	 
    		}
    
        }

    至此,开发环境和生产环境的所有配置都OK了,把springboot项目,nginx启动起来,则可以正常访问了

     

    展开全文
  • 我的项目前后端分离部署,后台已经配置过cors,但前端访问静态页面没有问题,一旦发请求访问后台服务器时...前端项目部署准备用nginx跨域 配置为: server { listen 80; server_name 118.25.187.60; #charset ...
  • 使用nginx搭建 在nginx中找到配置文件添加以下代码即可。 /api/ 为你VUE配置的跨域配置目标地址 location /api/ { rewrite ^/b/(.*)$ /$1 break; proxy_pass http://你跨域的地址/; }
  • vue 在开发环境,涉及跨域,就在本地配置了代理,但是部署到服务器上,就不行了。 解决方法有一下几种 服务器端配置CORS 用nginx反向代理,和访问本地服务器是一样的 可以修改成正式线上的地址,再build 推荐 ...
  • 跨域是前端最头疼的事情,它阻止了我们向后端请求数据,使之我们无法拿数据去渲染。 当然,后端可以解决跨域,而且相当简单。但是如果再后端没办法的情况下,前端如果处理这种问题呢? 一:开发环境下(就是vue...
  • vue项目打包好后扔服务器上,然后惊奇的发现在本地完美运行的连接的后端接口一个也没有成功获取数据,检查了无数次代码又百度好久之后才知道是本地运行时node已经帮我们实现了跨域,而在服务器中跨域需要重新...
  • 最近在用VUE进行开发项目,本地运行不会出现跨域问题,也没负责发布服务器的工作,对Vue项目如何打包发布不太了解,所以自己就看些博文,在自己电脑上面模拟发布一下。 第一步:下载nginx,解压 下载地址:...
  • 1.3、上传 ruoyi 的jar包远程服务器 1.4、运行 jar包 1.5、关闭防火墙 2、前端项目 2.1、打包前端项目 2.2、本地安装 nginx 2.3、配置首页和代理 2.4、nginx 命令 1、后端项目 1.1、已完成内容 redis...
  • VUE项目目录package.json热部署Vuetify框架UI框架使用域名访问 ...打包Vue项目,部署直接丢到Nginx部署 部署脚本 npm run dev npm start 文件 标识 理解 index.html <div id...
  • vuecli3打包部署到nginx跨域问题处理,vuecli3后目录的build和config文件夹都没有了,大部分合成在vue.config.js
  • 今天有前端的代码需要部署到服务器上,自己实在是太菜了,中间遇到许多问题,不过最终暂时成功,有点乱,这里做个小结。 本文将以遇到问题,及如何解决的形式展开,仅为个人浅薄理解。 项目采用烂小街的前后端分离...
  • 最近用vue开发前端,在...(1)把文件请求路径修改成相对请求路径,然后把打包好的dist文件下放后台项目的webapp文件夹下,然后这样访问就不存在跨域问题了; (2)使用nginx代理实现请求,下载nginx,然后修改配...
  • 平时我们在使用如vue等诸如此类的前端框架时,难免会回到跨域问题。在本地运行项目时,我们使用axios解决跨域问题。可是当我们部署到服务器上时,则会发现我们前台请求的地址404了,555…,头都整痛了,最后结合网上...
  • 首先我使用的是后端接口+前端vue的形式,这样就涉及到跨域问题。我是这样配置的: 这里是配置的如果访问apis则是转后端接口,这样就避免了跨域 然后还遇到一个问题:我在vue中使用的是vue-router跳转的,...
  • vue项目部署,并使用nginx反向代理异步请求接口,解决跨域问题 1.首先项目打包 修改 vue / config /index.js 打包命令:npm run build 打包完成后会在目录下的dist文件夹下生成打包文件 将dist文件夹传...
  • 参考:vue+webpack+vue-router(history) 部署到nginx服务器下,非根目录,前后端怎样配置文件? Nginx配置proxy_pass Nginx反向代理解决前后端联调跨域问题 1.1vue打包 其中vue+webpack+vue-rout...
  • 在开发环境中,使用的是在vue.config.js中配置devServer的方法解决的跨域,但是打包部署到服务器上后,发现还是无法访问服务端数据,后面查阅资料发现vue.config.js在打包后会失效,所以得在Nginx上配置反向代理实现...
  • iview-admin项目修改部署到nginx后可以成功运行,但当访问后台接口的时候就出现跨域问题。 由于后端使用的端口和前端不一致导致的问题。 对nginx.conf进行配置 server { listen 8080; server_name ****; ...
  • vue 项目的跨域问题

    2019-09-05 11:12:00
    说一说我的测试 ...因为本地的vscode配置完以后可以跨域,部署到IIS上以后会出现问题,所以 我选择使用Nginx 反向代理 解决跨域问题; 生产上的跨域 使用Nginx 配置文件:/api/ 代理到 localhost:8080 ...
  • vue项目如何使用nginx配置跨域

    万次阅读 2017-06-27 15:04:34
    最近使用vue开发一个功能,npm run build之后打包的代码放在了a.com.cn下但是php接口部署在了b.com下,那么问题来了,如何让后端接口支持跨域。有两种方法: 让后端在返回数据的时候设置下返回请求的header,这种...
  • 这里写自定义目录标题一、打包前注意事项:1.... config/index.js中配置的 解决跨域问题 的 `“proxyTable”`代理服务 在打包后会失效。4. main.js配置:开发环境、生产环境接口地址配置二、打包(使用idea)三、 n
  • 背景:做了一个简单的大文件上传下载的项目,然后应上司要求部署到服务器上运行。这几天到处查资料,解决一个又一个问题,总算看到成果了,在此记录一下。 后端 springboot+mybatis+mysql5.7 IDEA 前端 vue-cli3 ...

空空如也

空空如也

1 2 3 4
收藏数 80
精华内容 32
关键字:

vue部署到nginx跨域问题

vue 订阅