Vue本地代理举例:

module.exports = {
publicPath: './',
devServer: {
proxy: {
'/api': {
target: 'https://movie.douban.com',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
'/bpi': {
target: 'https://cdnopenapialifc.agaege.com/',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/bpi': ''
}
}
}
},
pwa: {
iconPaths: {
favicon32: 'favicon.ico',
favicon16: 'favicon.ico',
appleTouchIcon: 'favicon.ico',
maskIcon: 'favicon.ico',
msTileImage: 'favicon.ico'
}
}
}

  

Vue 本地代理编辑好后,能实现跨域获取接口数据,但是打包后在生产环境接口报错404,要怎样才能解决生产环境跨域问题呢?
在开发环境配置好本地代理后,使用Nginx反向代理解决生产环境跨域问题!

1、修改Nginx的配置文件 xxx.conf

location /api {
rewrite ^.+api/?(.*)$ /$1 break; //可选参数,正则验证地址
include uwsgi_params; //可选参数,uwsgi是服务器和服务端应用程序的通信协议,规定了怎么把请求转发给应用程序和返回
proxy_pass https://www.xxxxx.cn:444; #此处修改为自己的请求地址,必填
}
###api为本地开发时,在config/index.js中的proxyTable: {}配置的请求代理
###根据具体情况修改

  2、记得重启Nginx服务,使修改生效

举例:

location /api {
rewrite ^.+api/?(.*)$ /$1 break;
include uwsgi_params;
proxy_pass https://movie.douban.com;
} location /bpi {
rewrite ^.+bpi/?(.*)$ /$1 break;
include uwsgi_params;
proxy_pass https://cdnopenapialifc.agaege.com/;
}

  

Vue Nginx反向代理配置 解决生产环境跨域的更多相关文章

  1. nginx反向代理实现前后端分离&跨域问题

    1.代理和跨域 1.1 正向代理 1)用户希望代理服务器帮助其和要访问服务器之间实现通信,需要: a.用户IP报文的目的IP=代理服务器IP: b.用户报文端口号=代理服务器监听端口号: c.HTTP ...

  2. Nginx入门及如何反向代理解决生产环境跨域问题

    1.Nginx入门与基本操作篇 注:由于服务器是windows系统,所以本文主要讲解Nginx在windows下的操作. 首先下载Nginx 解压缩,我们所有的配置基本都在万能的 nginx/conf ...

  3. nginx反向代理配置及优化

    nginx反向代理配置及优化前言: 由于服务器apache抗不住目前的并发.加上前端squid配置后,问题依然无法解决.而页面程序大部分是动态.无法使用fastcgi来处理.因此想使用nginx做为反 ...

  4. nginx反向代理配置实例分享

    nginx反向代理配置一例. 配置内容如下: user www www; worker_processes 8; error_log /usr/local/webserver/nginx/logs/n ...

  5. Nginx配置解决NetCore的跨域

    使用Nginx配置解决NetCore的跨域 废话不多说,直接上Nginx配置 server { listen 80; server_name 你的Id或域名; location / { add_hea ...

  6. 使用python自动生成docker nginx反向代理配置

    由于在测试环境上用docker部署了多个应用,而且他们的端口有的相同,有的又不相同,数量也比较多,在使用jenkins发版本的时候,不好配置,于是想要写一个脚本,能在docker 容器创建.停止的时候 ...

  7. Nginx反向代理配置可跨域

    由于业务需要,同一项目中的前端代码放在静态环境中,而后端代码放在tomcat中,但此时问题却出现了:前端使用ajax请求后端获取数据时出现如下报错 XMLHttpRequest cannot load ...

  8. vue-cli 3.0 axios 跨域请求代理配置及生产环境 baseUrl 配置

    1. 开发环境跨域配置 在 vue.config.js 文件中: module.exports = { runtimeCompiler: true, publicPath: '/', // 设置打包文 ...

  9. nginx 反向代理配置示例

    Nginx反向代理在生产环境中使用很多的. 场景1: 域名没有备案,可以把域名解析到香港一台云主机上,在香港云主机做个代理,而网站数据是在大陆的服务器上. server { listen ; serv ...

随机推荐

  1. 什么是rpc及应用场景?

    你编过程序吧?你程序里有函数或方法间的调用吧? 比如你写了两个函数fa和fb,在fa里肯定可以调用fb,这个可以理解吧?好了,铺垫完了.接下来入正题: 别人写了个程序,程序里有个函数rf,而且这个程序 ...

  2. jvm堆、栈、String常量池

    原文地址:http://blog.csdn.net/tophawk/article/details/78704074 程序计数器:它的生命周期与线程相同,线程私有.较小的内存区域,用以完成分支.循环. ...

  3. getpeername、getsockname

    函数原型: #include<sys/socket.h> int getsockname(int sockfd, struct sockaddr *localaddr, socklen_t ...

  4. Salesforce 开发整理(三)权限共享

    Salesforce提供对象的访问权限可以通过 安全性控制 → 共享设置,可以查看每个对象在系统内部默认的访问权限 共用读写:对象的记录任何用户都可以进行读写操作 公用只读:对象的记录任何用户都可以查 ...

  5. Computer-Hunters——项目系统设计与数据库设计

    Computer-Hunters--项目系统设计与数据库设计 前言 本次作业属于2019秋福大软件工程实践Z班 本次作业要求 团队名称: Computer-Hunters 本次作业目标:撰写一份针对团 ...

  6. pyhon项目之后pexpect使用

    pyhon项目之后pexpect使用1.安装pip3.6 install pexpect 实例1 ssh 登陆linux 服务器,并且执行命令 #!/usr/bin/env python3.6# -* ...

  7. 简单认识RTLO(Right-to-Left Override)

    目录 两行代码实现字符逆序输出 做个假文件 参考 今天在群里看到的用法,RLO是一个微软的中东Unicode字符8238,或者0x202E,可以使后面的字符都变为RTL(阿拉伯语从右往左书写,对我们来 ...

  8. .net core 运行不需命令行

    1.问题情景: 需要保证已安装.net core SDK,并且命令提示符下运行“dotnet --version”,有反应. 如果之前运行良好,现在却不行了,查看安装程序中存在.net core SD ...

  9. 【Kubernetes学习之一】Kubernetes 简介

    环境 centos 7 一.概念和组件Kubernetes是Google开源的一个容器编排引擎,它支持自动化部署.大规模可伸缩.应用容器化管理,简称k8s. 1.Master Kubernetes中的 ...

  10. 修改mysql存储过程或函数的定义着

    以root用户登录mysql控制台 (1)首先查询 mysql> select definer from mysql.proc; (2)然后根据条件进行更新 update mysql.proc ...