精华内容
下载资源
问答
  • Vue打包上线跨域问题处理

    千次阅读 2020-03-11 18:06:25
    由于开发环境和生产环境的不同,会导致vue访问出现跨域的问题。 一、开发环境跨域问题 1.config/index.js文件配置代理,找到proxyTable字段,如下面一样配置 dev: { // Paths assetsSubDirectory: 'static', ...

    由于开发环境和生产环境的不同,会导致vue访问出现跨域的问题。

    一、开发环境跨域问题

    1.config/index.js文件配置代理,找到proxyTable字段,如下面一样配置
    
    dev: {
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
          '/xxx': {
            target: 'http://xxx/api', //访问的接口1
            changeOrigin: true,
            pathRewrite: {
              '^/xxx': '/'
            }
          },
          '/yyy': {
            target: 'http://yyy/api', //访问的接口2
            changeOrigin: true,
            pathRewrite: {
              '^/yyy': '/'
            }
          },
        },
    

    配置好后 访问的url就不用再其他地方带上域名了。这个只适合开发环境使用,因为开发环境的本地服务器,以及做好了代理的功能,无需去多余的操作。

    二.生产环境跨域问题

    为了不用反复在开发和打包之间切换访问的api域名代码。可以入下配置
    找到config/prod.env.js。  这个config/dev.env.js开发环境的前面已经配置好了可以不用管了
    
    'use strict'
    module.exports = {
      NODE_ENV: '"production"',
      APP_BASE_APP_API:'"http://xxxx"', //项目api地址1 注意里面的双引号
      APP_BASE_WWW_API:'"http://yyyy"', //项目api地址2
      ......
    }
    
    import axios from 'axios';
    Vue.prototype.axios = axios.create({
      headers: {
        'content-type': 'application/json'
      }
    })
    Vue.prototype.$post = function (url, data = {}) {
      let _url = ''
      if (process.env.NODE_ENV === 'development') {//这个是开发环境下
        _url = url
      } else if (process.env.NODE_ENV === 'production') {//这个是生产环境下
        _url = url
        if (url.search(/http:\/\//) != -1 || url.search(/https:\/\//) != -1) {//直接全URL访问
          _url = url
        } else if (url.search(/\/xxx/) != -1) {//定义的开头uri 
          url = url.replace("xxx", "api"); //如果uri不一样就替换成一样的
          _url = process.env.APP_BASE_APP_API + url;
        } else {
          _url = url
        }
      }
     return new Promise((resolve, reject) => {
        this.axios.post(url, data).then(res => {
          resolve(res)
        }).catch(function(error) {
          reject(error)
        })
      })
    }
    
    以上就完成前端所有的准备工作, 如果只靠前端目前未找到解决的办法,有这方面知识的高手希望留个言
    

    最后后端配置下服务器
    Access-Control-Allow-Headers: *
    Access-Control-Allow-Origin: *

    展开全文
  • https://www.pianshen.com/article/9593257962/ 这点特别重要 就是 rewrite ^.+api/?(.*)$ /$1 break; 这一行省略就会报 404 网上说的好多都垃圾 直接添加proxy_pass 放屁呢给我

    相关说明

    在nginx.conf 里添加如下两行配置就行 其他都是可选的。

    location /api {
                rewrite  ^.+api/?(.*)$ /$1 break;
                proxy_pass  http://192.168.1.100:7001;    #node api server 即需要代理的IP地址
             }
    

    这点特别重要 就是 必须添加下面这一行
    rewrite ^.+api/?(.*)$ /$1 break;
    这一行省略就会报 404
    网上说的好多都垃圾 直接添加proxy_pass 放屁呢给我

    展开全文
  • Vue项目生产环境解决跨域问题

    万次阅读 2019-06-21 11:15:50
    一.前言 第一次写vue项目,开发完成。打包上线,一访问,发现访问...那好吧,开始解决生产环境跨域问题 看到的大多数的解决方法: (1)在config/dev.env.js下配置开发环境的API_ROOT 'use strict' cons...

    一.前言

    第一次写vue项目,开发完成。打包上线后,一访问,发现访问后端的请求全部报404.我就纳闷了,跨域问题我已经解决了,怎么就报错了。查阅资料,得知我解决的跨域仅适用于开发环境。

     

    ememem...那好吧,开始解决生产环境的跨域问题

     

    看到的大多数的解决方法:

    (1)在config/dev.env.js下配置开发环境的API_ROOT
    
    'use strict'
    const merge = require('webpack-merge')
    const prodEnv = require('./prod.env')
    
    module.exports = merge(prodEnv, {
      NODE_ENV: '"development"',
      API_ROOT: '"/api"'   //这是新增的代码
    })
    
    
    (2)在config/prod.env.js下配置生产环境的API_ROOT
    
    'use strict'
    module.exports = {
      NODE_ENV: '"production"',
      API_ROOT: '"https://xxx/"'   //这是新增的代码
    }
    (3)在需要调用的地方
    
    export const evidence_url = process.env.API_ROOT + '/' + '';  
    
    //process.env.API_ROOT 根据不同的环境会返回给你不同的API_ROOT
    

    因为导入webpack-merge不太方便。又查询了webpack-merge。

    通常会用process.env.NODE_ENV === "development",并且在package.json中设置环境变量来进行判断,不
    过当文件大了或者页面需要判断的地方多了之后,配置文件就会充斥着大量三元表达式
    。
    
    可以考虑用webpack-merge将配置文件拆分为3个文件,一个是webpack.common.js,即不管是生产环境还是开发
    环境都会用到的部分,以及webpack.product.js和webpack.dev.js, 并且使用webpack-merge来合并对象。
    

    所以说,我的项目很简单,没有必要导入webpack-merge

    其中:process.env.NODE_ENV 引起了我的注意

    1. //默认 NODE_ENV 为环境变量名称

    2. //可自行在 process.env 对象下定义需要使用的变量,在项目中可以根据

    3. //不同的 env 值设置 defaultUrl 或者其他值

     上面的方法就相当于在main.js里加入下面这句话:

     Vue.prototype.baseUrl = process.env.NODE_ENV==="production"?"http://api.jzdisplay.com":"/api"

     但是http://api.jzdisplay.com,我不知道来自哪里。反正目前是不存在这样一个路径。我看了很多博客都没有说,我想这个路径应该是反向代理给出的,所以真正解决跨域问题的方法根本就不是上面的方法(与之类似的方法同理)。上面的方法解决的是,不同环境访问不同接口。

    二、不同环境接口配置

    main.js 中写入

     Vue.prototype.baseUrl = process.env.NODE_ENV==="production"?"http://192.168.0.2/show":"/api"

    使用:

        async getdata() {
          try {
            var url=this.baseUrl+"/getShowData";
            const response = await this.$axios.get(url);
            ....
          } catch (error) {
            // 错误处理
          }
        }

    当你开发测试时,请求数据会走代理路径,当上线时,请求数据会走真实路径(服务器提供的后端路径)

    三.解决跨域

    后来同事请教朋友,说访问路径直接写成原始的,不走代理。当然这么做,因为端口不同,依然会存在跨域。其实F12,数据是请求到的,但是依然没有显示并报跨域的错误。唉,我想明白了,上线跨域问题,应该是服务器解决的。

    1、cros

    因为大家使用的后端语言各不一样,得自己去查询怎么做了。

    2.反向代理

     

    四.请求cancle

    哦对了,其中还有个小插曲

    前端去请求后端,请求状态一会儿变成了cancled。原因是main.js中

     Vue.prototype.timeout = 500

    timeout设置的太短了,还没访问到数据就超时了。

     

    五、总结

    虽然很笨地走了好些绕路,但处理这类问题,不再像之前一样晕乎晕乎了。文章写得有些乱,如果有什么不正确,欢迎各路英雄指正。

    展开全文
  • 首先要说下,跨域分为开发环境和生产环境: 开发环境:解决跨域通常是在配置文件中使用proxy进行反代理(这个根据具体的vue版本具体配置不同,最好去官网搜索) 生产环境:通常需要使用反代理了(网上搜的) 而我...

    首先要说下,跨域分为开发环境和生产环境:

    • 开发环境:解决跨域通常是在配置文件中使用proxy进行反代理(这个根据具体的vue版本具体配置不同,最好去官网搜索)
    • 生产环境:通常需要使用反代理了(网上搜的)

    而我这里本地开发使用的是电脑的iis服务器,经过网上查询使用,解决如下:
    1.下载安装ARR,地址为https://www.iis.net/downloads/microsoft/application-request-routing
    2.下载安装urlrewrite,地址为https://www.iis.net/downloads/microsoft/url-rewrite
    3.配置ARR
    以上安装完后,重新打开iis,按下图红框操作
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    4.配置url重写,网上好多是直接在网站的重写里面配置的,这里可以直接在打包的dist目录下增加一个web.config文件(下面代码最开始是解决mode是history,页面空白的问题,现在增加反代理直接就在这里增加了)
    我的后端接口路径是http://192.168.1.101:8000/对应接口名字
    注意:在打包时访问接口要对应其服务器的url,通常我们会根据开发环境或生产环境配置baseUrl,进而对axios进行封装

    <?xml version="1.0" encoding="UTF-8"?>
    <configuration>
      <system.webServer>
        <rewrite>
          <rules>
            <rule name="url" stopProcessing="true">
              <match url="(.*)" />
              <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
              </conditions>
              <action type="Rewrite" url="http://192.168.1.101:8000/{R:0}" />
            </rule>                
          </rules>
        </rewrite>
      </system.webServer>
    </configuration>
    
    展开全文
  • vue项目打包后跨域

    千次阅读 2019-11-17 18:56:36
    关于vue跨域配置,有开发环境的跨域生产环境跨域,详见我的另一篇博客:https://blog.csdn.net/qq_40652539/article/details/102877458; 对于上篇文章的生产环境跨域地址配置,是将所有接口的访问都指向同...
  • Vue 本地代理编辑好后,能实现跨域获取接口数据,但是打包后在生产环境接口报错404,要怎样才能解决生产环境跨域问题呢? 在开发环境配置好本地代理后,使用Nginx反向代理解决生产环境跨域问题! 1、修改Nginx的配置...
  • 在开发环境中,和后台对接为了解决跨域问题,使用了代理,也就是vue的proxyTable,但是打包放到生产环境中去时,接口请求不到,404,原因是开发环境的代理并不能用到生产环境,但是直接在请求接口是使用服务器地址,...
  • 这里写自定义目录标题一、打包前注意事项:1.... config/index.js中配置的 解决跨域问题 的 `“proxyTable”`代理服务 在打包后会失效。4. main.js配置:开发环境、生产环境接口地址配置二、打包(使用idea)三、 n
  • vue的项目中使用axios发送ajax请求,因为跨域,使用了proxy反向代理,开发环境测试没有问题,但是项目打包放到生产环境时报404错误,查了一下解决方案,可以后端设置nginx解决,但是我们这个项目服务器没用nginx,...
  • 一、项目环境 ...二、Vue实现跨域,区分开发环境和生产环境的后台访问路径 1.新建globalApi.js,js中加入如下代码 //声明变量 let BASE_URL=''; //判断当前运行环境 if (process.env.NODE_ENV === ...
  • Vue Nginx反向代理配置 解决生产环境跨域 Vue 本地代理编辑好后,能实现跨域获取接口数据,但是打包后在生产环境接口报错404. 要怎样才能解决生产环境跨域问题呢? 在开发环境配置好本地代理后,使用Nginx反向代理...
  • 交给我的时候axios用的webpack的proxy,但是在生产环境中使用不了proxy 所以只能老老实实写URL。 但是出现了一问题,使用proxy代理时, 登录cookie自动被写入“shirosessionid” 贴代码 ```javascript // ...
  • Vue中nginx反向代理

    2020-07-10 20:31:09
    Vue 本地代理编辑好后,能实现跨域获取接口数据,但是打包后在生产环境接口报错404,要怎样才能解决生产环境跨域问题呢? 在开发环境配置好本地代理后,使用Nginx反向代理解决生产环境跨域问题! 1. 修改Nginx的...
  • Vue 项目部署

    2021-03-18 12:01:22
    项目 跨域 CORS 部署项目不需要前端做太多的...把打包后的项目放在nginx服务器的目录 配置反向代理 location /api { proxy_pass https://m.douyu.com; } 重启服务器 直接可通过ip地址访问到相关资源 接口服务器
  • Express、Koa2:开发环境使用Express,生产环境使用Koa2 ES6、ES7、ES8:服务端和客户端均使用ES6语法,promise/async/await 处理异步 localStorage:本地保存用户信息 Webpack:模块打包,前端项目构建工具首选 ...
  • 但是 Vue 打包后的部署,需要一个静态资源服务器来 Serve,如果跨域未在服务器端处理,那么在这一静态服务器中同时还要处理 Vue生产环境下的跨域。 静态资源服务器的实现方式有很多,基本每种服务端语言都有...
  • 项目做完了,需要发布到生产环境,以完成项目最重要的里程碑事件。项目的发布有二种情况:1、前后端分离发布:前端做前端部署前端的项目,后端部署后端的项目,二项目相互独立,前端可以充分使用前端技术进行优化,...
  • 说在前面我们都知道,docker可以实现很简便的部署环境。现在我们有一个前后端分离的项目,前端基于Vue开发、利用...那么如果是在生产环境,就会产生跨域问题。前端的请求要反向代理到后台。大家肯定首先想到的就是...
  • 那么如果是在生产环境,就会产生跨域问题。前端的请求要反向代理到后台。大家肯定首先想到的就是使用 Nginx 设置 proxy_pass 。是的没有错。那么我们有了这些想法。我们如何通过 docker-compose 来实现呢? 开始...
  • 、</em>.loader、eslint、babel、打包后部署时完全用不到的、仅在开发需要 编译、检测、转换 的放在这里。 dependencies:例如:axios、chart、js-cookie、less、lodash、underscore等运行时的库或工具...
  • vue 项目生产环境运行正常,打包上线时使用 node express 快速生成了服务端,配置多重跨域猴,将 dist 下文件放入public 之后遇到了上述错误 二、问题产生原因 在看服务端配置 app.js 文件时,发现 有这莫一行代码 ...
  • 【webpack应用系列(二)】从零搭建vue生产环境 【webpack应用系列(三)】webpack性能优化 源码进阶系列 【webpack进阶系列(一)】手撸一个mini-webpack(1) : 分析收集依赖 【webpack进阶系列(二)】手撸一个...
  • i.devEntry : i.depEntry, // 根据环境注册生产环境or开发环境地址 container: appContainer, // 绑定dom activeRule: i.routerBase, // 绑定子应用路由前缀 props: { ...props, routes: i.children, routerBase...
  • mall开发及生产环境的搭建 mall在Windows环境下的部署 mall在Linux环境下的部署(基于Docker容器) mall在Linux环境下的部署(基于Docker Compose) mall在Linux环境下的自动化部署(基于Jenkins) mall前端项目的...

空空如也

空空如也

1 2
收藏数 26
精华内容 10
关键字:

vue打包后生产环境跨域

vue 订阅