精华内容
下载资源
问答
  • vue项目打包后跨域
    千次阅读
    2019-11-17 18:56:36

    关于vue的跨域配置,有开发环境的跨域和生产环境的跨域,详见我的另一篇博客:https://blog.csdn.net/qq_40652539/article/details/102877458
    对于上篇文章的生产环境的跨域地址配置,是将所有接口的访问都指向同一个服务器,而对于前后端未完全分离的项目,如果有某个接口需要访问非当前项目的另一台服务器的话,就需要对这个接口单独进行处理了,针对这个问题,我重新梳理了一下关于生产环境下的跨域思路并总结了几种解决方案
    1、使用nginx反向代理(proxy):配置nginx服务并开启服务(可以在nginx中设置对应的url,并设置proxy地址) --> 浏览器访问nginnx的服务地址 --> 当访问到已设置的url时,nginx会去访问proxy的地址,从而进行跨域(这里可能还需要设置一个和后端协商的请求头,如:token,用来让后端核对访问者的身份信息);
    2、通过接口请求后端,由后端请求另一台服务器进行获取数据;
    3、与后端协商请求头,在请求中添加请求头;

    其实我感觉最好的方式是第一种,可以解决所有的跨域问题;
    对于前后端未完全分离的情况,我觉得第二种方法比较好点,毕竟服务与服务之间不存在跨域

    更多相关内容
  • 常见的跨域配置(/config/index.js): proxyTable: { '/api': { target: 'http://192.168.2.139:8080/Mobile/Max', // 接口的域名 // secure: false, // 如果是https接口,需要配置这个参数 changeOrigin: true, ...
  • 在使用vue.js开发前端项目时,再结合webpack搞起各种依赖、各种插件进行开发,无疑给前端开发带来了很多便捷,就在解决跨域这个问题上,相信众多用vue.js的前端同僚们同我一样尝到了甜头,开发环境全靠proxyTable...
  • vue 在开发环境,涉及跨域,就在本地配置了代理,但是部署到服务器上,就不行了。 解决方法有一下几种 服务器端配置CORS 用nginx反向代理,和访问本地服务器是一样的 可以修改成正式线上的地址,再build 推荐 ...
  • 主要介绍了Vue跨域以及打包部署到nginx跨域设置方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue代理解决生产环境跨域问题

    千次阅读 2021-09-13 20:10:16
    当我们前端要调用跨域接口时,我们需要用代理解决跨域问题,比如Vue的代理配置proxy,但是当Vue项目打包成静态文件时,他的代理也就失灵了,因为代理的前提是本地必须有service,本章讲一下生产环境Vue项目如何做...

    当我们前端要调用跨域接口时,我们需要用代理解决跨域问题,比如Vue的代理配置proxy,但是当Vue项目打包成静态文件时,他的代理也就失灵了,因为代理的前提是本地必须有service,本章讲一下生产环境的Vue项目如何做代理。

    本章我们从两方面讲解Vue解决跨域的方案,一种是本地开发环境,另一种是生产环境(nginx解决vue跨域问题)

    1.Vue本地(开发环境)解决跨域流程如下

    (1)打开vue.config.js,在module.exports中添写如下代码:

    devServer: {
        port: port,
        open: true,
        overlay: {
          warnings: false,
          errors: true
        },
        proxy: {
          '/api': {
            target: process.env.VUE_APP_BASE_API,
            changeOrigin: true,
            pathRewrite: {
              '^/api': 'api'
            }
          }
        }
      },
    

    2)请求接口时加上‘/api’前缀

    getData () { 
     axios.get('/api/getData.json', function (res) { 
       console.log(res) 
     })
    

    2.生产环境解决跨域问题流程如下

    (1)打包

    我们通过terminal窗口,找到我们项目根目录 运行 npm run build命令
    (2)服务器安装nginx服务器
    (3)配置nginx

    找到nginx的配置文件 nginx.conf ,它的路径是 /etc/nginx/nginx.conf

    nginx.conf的配置如下

    server {
            listen       8000;
            server_name  localhost;
    
            #charset koi8-r;
    
            #access_log  logs/host.access.log  main;
            location /api {
                proxy_pass https://www.baidu.com;  #代理的域名
                add_header 'Access-Control-Allow-Origin' '*'; 
                add_header 'Access-Control-Allow-Credentials' 'true'; 
            }
            location  / {
                root   /var/www/vue/;
                index  index.html index.htm;
            }
        }
    

    解释如下:

    • https://www.baidu.com 是我们要代理域名

    • add_header 是增加返回头 解决跨域问题

    注意:vue项目在请求域名的前面就要加上“/api”字符串,请求示例如下

    test.post('/api/product/getData',params)
    

    实战

    nginx部署vue-admin-template
    打包部署vue-admin-template项目
    npm run build:stage
    
    配置nginx配置文件

    进入nginx文件夹下的conf文件,打开nginx.conf文件,修改端口以及配置子目录

    server {
        listen       8000;
        server_name  localhost;
    
        #charset koi8-r;
    
        #access_log  logs/host.access.log  main;
        location  /doctor {
            root   /var/www/vue/;
            index  index.html index.htm;
        }
    }
    

    3、部署
    在nginx目录里面的html文件夹中新建doctor文件夹
    将vue-admin-template项目中的dist文件夹下的所有东西复制粘贴到nginx目录下的html下的doctor文件夹中。
    重启nginx,在浏览器输入localhost:8090/doctor,进入网站页面

    错误处理

    虽然项目部署启动成功,但是当点击登录时报请求失败,使用火狐浏览器打开控制台的network,可以看到该请求路径的前面加了一个前缀/stage-api,使原后端接口请求由/doctor/login变为/stage-api/doctor/login。

    使用nginx代理可以解决此问题:打开nginx.conf文件配置以下内容

    location /stage-api {
        proxy_pass https://www.baidu.com;  #代理的域名
        add_header 'Access-Control-Allow-Origin' '*'; 
        add_header 'Access-Control-Allow-Credentials' 'true'; 
    }
    
    展开全文
  • 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: *

    展开全文
  • 打包前的本地localhost:8080环境下可以用 proxyTable代理来解决跨域问题。[配置完成重启项目服务] 原理:用自定义名如'/api'来代替你请求数据的url地址,proxyTable会自动识别你数据请求url的地址,识别/api字符,...

    [首先查看是否引入数据库文件,如果没有数据库文件,请求后浏览器显示的是跨域问题!先排除数据库文件有没有引入!]

    1.打包前的本地localhost:8080环境下可以用 proxyTable代理来解决跨域问题。[配置完成后重启项目服务]

    原理:用自定义名如'/api'来代替你请求数据的url地址,proxyTable会自动识别你数据请求url的地址,识别/api字符,然后将/api替换为你想要请求的原网址。

    "首先要确定你的vuecli是2还是3、4"


    vuecli2:

    在config目录的index文件中module.exports 的dev 中加入proxyTable代理。

    module.exports = {
      dev: {
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
    
        // Various Dev Server settings
        host: 'localhost', // can be overwritten by process.env.HOST
        port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
        autoOpenBrowser: false,
        errorOverlay: true,
        notifyOnErrors: true,
        poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    
        proxyTable: {    //下面两个/api可以改成自己定义的名字
          '/api': {
            target: 'http://localhost:9900',  //你的数据请求地址(此处9900为举例)
            secure: true,    //如果是https,加入这句代码
            changeOrigin: true,     //同意跨域
            ws: true,
            pathRewrite: {
              '^/api': '',
            }
          }
        },
      }
    }

    当你用ajax或者axios时就可以将url中的/api变为proxyTable中target的路径,如:

    axios.get({
        url:'/api/wx/mymessage'  //proxyTable将/api变为http://localhost:9900
    }).then(res => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    })

    (若已使用axios.create封装,可以在baseURL前面加入/api),配置完成重新npm run dev


    vuecli3或4:

    在根目录的vue.config.js(没有这个文件可以创建)中加入proxyTable代理。

    
    module.exports ={
    devServer: {
            host: "0.0.0.0",
            port: 8082, 
            https: false, 
            open: true, 
            proxy: {            //下面两个/api可以换成自己定义的名字
               '/api': {
                    target: 'http://localhost:9900',  //你的数据请求地址(此处9900为举例)
                    secure: true,    //如果是https,加入这句代码
                    changeOrigin: true,     //同意跨域
                    ws: true,
                    pathRewrite: {
                          '^/api': '',
                        }
                 }
            }
        },
    }

    当你用ajax或者axios时就可以将url中的/api变为proxyTable中target的路径,如:

    axios.get({
        url:'/api/wx/mymessage'  //proxyTable将/api变为http://localhost:9900
    }).then(res => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    })

    (若已使用axios.create封装,可以在baseURL前面加入/api),配置完成重新npm run start


    到此解决了打包前的跨域问题

    2.打包后可以用nginx代理来解决跨域问题。

    原理:打包后你在代码中配置的proxyTable不会被打包入dist文件中。所以要找一个外部的插件解决跨域问题。与本地环境下的proxyTable相同,nginx作为前端服务器,它的外部跨域插件非常好配置,可以直接下载使用。

    nginx就是为打包的dist文件开启一个本地的localhost地址,配置好nginx后要打开nginx开启的localhost地址来运行打包文件,而不是直接打开dist里面的index文件。

    下载地址:nginx: download

     下载Stable version中的第三个也就是Windows版本就可以了,下载后解压。解压后文件中的exe文件可以直接运行nginx(会弹出一个cmd窗口然后消失,可以打开资源管理器查看服务是否启动)。

    在启动服务之前需要配置conf中的nginx.conf文件(配置完后在任务管理器关掉nginx后重新启动)。

    打包后根据请求地址不同可以分为以下三种情况:

    1、请求数据地址同样为本机开启localhost地址。(一般出现在练习环境下)

    2、请求数据地址为项目甲方未配置代理的内网服务器。(一般出现在项目对接环境下)

    3、请求数据地址为云服务器。【云服务器的商家一般都给自己的接口解决了跨域问题(直接https或者http请求就可以),一般可以直接请求】

    根据1和2情况的不同,nginx也有两种配置方式


    1、请求数据地址同样为本机开启的localhost地址。

    location /api {
             		rewrite ^/api/(.*)$ /$1 break;
             		proxy_pass http://localhost:8020;换成你的后端接口
             	}
    
    
    放一个方便复制的代码段
    
    

     再把源代码url:'http://localhost:9966/this/go'改为url:'/api/this/go'就可以了


    2、请求数据地址为项目甲方未配置代理的内网服务器。(一般出现在项目对接环境下)

     源代码中的请求地址该怎么写就怎么写,此处nginx不起替换作用,只是代理开启服务器。(不用担心这样改动会造成用户也需要配置nginx才能打开网页,这不是你要想的问题,这是服务器需要配置的问题)


    总结:vue产生跨域问题不只是前端问题,这个问题在后端也可以加注释块解决,但是后端解决会产生漏洞,增加网站被黑风险。不要认为这是前端或者后台应该做的工作。

    展开全文
  • 关于vue跨域的踩过的坑和解决方案前提(需求)开发环境生产环境 前提(需求) 最近做一个功能需要请求三方资源.json文件,因为之前用jquery的时候使用ajax-jsonp很容易就get到了数据, 但是我发现请求三方接口和三方...
  • VUE打包发布
  • 1、config文件夹下index.js文件设置proxyTable(proxyTable... // target: 'http://10.xx.xx.xx:8080/renter-server', // 生产环境接口 changeOrigin: true, pathRewrite: { '^/api': '/' } } }, host: '自己的I
  • Vue项目生产环境解决跨域问题

    万次阅读 2019-06-21 11:15:50
    一.前言 第一次写vue项目,开发完成。打包上线,一访问,发现访问...那好吧,开始解决生产环境跨域问题 看到的大多数的解决方法: (1)在config/dev.env.js下配置开发环境的API_ROOT 'use strict' cons...
  • 起因在vue文件打包,项目脱离了vue配置的...此时我们可以利用nginx处理跨域,其实vue配置也是利用的这个nginx处理vue打包文件跨域问题安装先在官网下载nginx 注意版本 运行的环境 我这里用的是windows 然后...
  • 常见的跨域配置(/config/index.js): proxyTable: { '/api': { target: 'http://192.168.2.139:8080/Mobile/Max', // 接口的域名 // secure: false, // 如果是https接口,需要配置这个参数 changeOrigin: true....
  • Vue打包后处理跨域

    2019-05-25 13:52:00
    我们都知道,在处理跨域时经常会用到jsonp,服务器端用到cors,或则本地测试用到nginx反向代理,vue开发模式的proxy等。当我们在自己开发的时候,可能会请求一些网上的接口,但是会遇到一些问题,比如不支持跨域的远程...
  • vue项目连接外部api接口时,打包部署到nginx出现api404,api跨域问题,这个时候需要给vue项目本身进行跨域,再配置nginx中进行跨域即可解决,详见下文。 1. 首先给vue项目加上跨域【使用外部api时】 在vue项目中...
  • 如何在生产环境和开发环境下在前解决跨域问题 跨域的问题, 首先需要明确是开发环境还是生产环境,开发环境据我自己理解 就是本地的开发 端口地址啥的都是localhost 生产环境就是本地Buid之后大包放到服务器上运行,...
  • 最近用vue开发前端,在开发过程中使用vue自带的代理工具进行访问后台代码,这个过程一直没有问题,但是打包之后放到服务器上出现请求访问跨域的问题,在网上查找解决方案的过程中发现主要有两种解决方案: ...
  • 2、问题:vue打包后的静态页面和文件直接由nginx代理访问没有问题,但是请求接口时是请求不到的。 3、解决方案: a)配置nginx: server { listen 80; server_name localhost location / { root D:/static; #...
  • Vue Axios开发环境生产环境跨域问题解决 一、前置知识 首先要了解几个Vue-cli的几个配置参数。另:从 Vue CLI 3.3 起baseUrl已弃用,请使用publicPath 1. publicPath 它是部署你的应用包时的基本URL。默认为 '/'...
  • 前端vue打包项目,解决跨域问题

    千次阅读 2019-03-11 15:41:55
    前段时间做一个vue打包成安卓和IOS的App,遇到了跨域问题,直接拿了之前项目的配置,却不起作用。 import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config...
  • 问题:在本地使用了proxyTable代理可以正常跨域请求后台数据,打包上传就无法获得后台的json文件。查看了相关资料可以用nginx进行解决。还可以使用命名环境变量,请求的时候进行判断,话不多说上干货module....
  • vue打包部署axios跨域问题

    千次阅读 2020-07-06 23:07:29
    一、本地使用命令运行跨域问题。 外网访问的地址:https://www.runoob.com/try/ajax/json_demo.json 本地springboot接口访问的地址:http://192.168.3.12:8081/register/getSmsCode/123456789 1、axios访问的代码: ...
  • Vue本地代理举例: module.exports = { publicPath: './', devServer: { proxy: { '/api': { target: 'https://movie.douban.com', ws: true, changeOrigin: true, pathRewrite: { '^/api': '' } },
  • 这几天在把项目弄好,打包完成发现之前cli配置的拦截器没有在打包后没起到作用,使用别的方法通过nginx反向代理进行配置跨域。 解决方案 在nginx里面的nginx.config里面配置 配置如下 server { listen 80;#监听...
  • 解决方法一: 在VScode内安装Live Server插件 配置 vite.config.ts 打包好html.index点击VSode 下的Go Live启动服务 启动默认5500端口 http://127.0.0.1:5500/dist/index.html 解决方法二: @vitejs/plugin-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,415
精华内容 4,166
关键字:

vue打包后生产环境跨域