vue-webpack项目本地开发环境设置代理解决跨域问题

前言:

一般跨域问题只要后端配置好的话,是不需要前端做处理的,但也不能保证你遇到的所有后端都能很好的处理这个问题,这个时候可能就需要前端设置代理解决这个问题了。

配置方法:

1. config/index.js

  proxyTable: {
        ‘/api‘: {
            target: ‘http://192.168.8.8:8080‘, // 要访问接口的域名
            // secure: false,  // 如果是https接口,需要配置这个参数
            changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
            pathRewrite: {
              ‘^/api‘: ‘‘//重写接口访问
            }
          }
    },
  host: ‘192.168.8.1‘,//本机Ip或localhost

注意:/api一定要有,命名可以不一样。

2. 接口访问地址改为本机访问地址+端口+"/api"

export default
{
  DOMIN:"http://192.168.8.1:8080/api"//本机访问地址+"/api"(也可以用http://localhost:8080/api)
}

重新运行即可。

原文地址:https://www.cnblogs.com/xyyt/p/9186201.html

时间: 2024-09-30 22:55:29

vue-webpack项目本地开发环境设置代理解决跨域问题的相关文章

前端开发环境搭建以及如何跨域

前端本地开发环境搭建总结: 安装nodejs环境(推荐6.0以后的LTS版本),安装完之后打开终端(mac平台),windows平台可以 WIN+R 打开运行,输入cmd,打开命令窗口,输入npm --version,如果能看到版本,说明已经安装成功: 在本地电脑的工作目录下面,执行 "git clone" + gitlab仓库的地址,把项目克隆下来: 使用编辑器(推荐webstorm或者vs code,功能强大,当然如果有其他熟悉的IDE也可以,前提是熟悉)打开项目,找到node的s

解决前端开发环境中的的跨域问题

一.为什么会有跨越问题是客户端浏览器同源策略导致的,就是浏览器不允许不同源的站点相互访问.试想一下要是没有这个,那站点里的安全信息如cookie,账号/密码等是不是很容易被其它站点获取.二.解决思路知道是客户端浏览器为了安全使用同源策略导致的,而服务端是没有这个限制的,那我们就只能通过服务端进行跨域了.不管是jsonp,core,还是代理的方式,都是需要服务配合的.哈哈,这也是为啥后端和生产环境下比较少听说跨域的问题,所以这里介绍前端开发环境中的几种解决方法.三.解决方案1.完全交予后端解决,配

PhoneGap开发跨平台移动APP - 解决跨域资源共享

解决跨域资源共享 一.WebApi解决跨域资源共享. 开发中选择WebApi来作为服务端的数据接口,由于使用PhoneGap,就需要通过js来获取远程远程数据服务器的数据,由于同源策略的限制,这就涉及到跨域资源共享问题. 首先新建一个简单的WebApi项目, 使用微软的CORS解决方案,再Nugget中下载microsoft.aspnet.webapi.cors. 配置WebApiConfig: //这里先用*来测试,生产环境下,这样配置是不安全的,需要做一些限制.config.EnableCo

前端通过Nginx反向代理解决跨域问题

本文探讨了前端如何通过Nginx反向代理的方式解决跨域问题. 跨域 再次重申: 跨域是浏览器行为,不是服务器行为. 实际上,请求已经到达服务器了,只不过在回来的时候被浏览器限制了.就像Python他可以进行抓取数据一样,不经过浏览器而发起请求是可以得到数据,想到通过Nginx的反向代理来解决跨域问题. 代理 所谓代理就是在我们和真实的服务器之间有一台代理服务器,我们所有的请求都是通过它来进行转接的. 正向代理 正向代理就是我们访问不了Google,但是我在国外有一台vps,它可以访问Google

Vue-cli创建项目从单页面到多页面4 - 本地开发服务器设置代理

前后端分离开发时,有时候会遇到跨域的情况:只在开发的时候存在跨域,项目上线后,由于配置的域名相同,跨域就会不存在. 这个时候,有两种方案可以比较快的解决: 1.利用h5的特性,使用cors,在ngnix服务器上设置header:Access-Control-Allow-Origin的值为 *(或者目标域名)允许跨域. 2.在我们的本地开发服务器上设置代理. 这里主要介绍使用vue-cli创建项目后,怎样配置本地服务器的代理,成功通过本地服务器代理请求数据的解决方案. 解决方案 进入config/

Vue.js项目的开发环境搭建与运行

写作背景:手上入一个用Vue框架写的微信公众号项目,根据公司安排,我负责项目源代码的验收工作(当然专业的工作检测会交给web开发人员,我只是想运行起来看一看). 1 开发环境安装步骤: (一)安装node.js(JavaScript运行环境runtime) 从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以完成. 完成之后,开发命令行工具,输入 node -v 如果出现相应的版本号,则说明安装成功. 另外,npm是node.js下的包管理器,npm能很好的和诸如webp

nginx反向代理解决跨域

上面已经说到,禁止跨域问题其实是浏览器的一种安全行为,而现在的大多数解决方案都是用标签可以跨域访问的这个漏洞或者是技巧去完成,但都少不了目标服务器做相应的改变,而我最近遇到了一个需求是,目标服务器不能给予我一个header,更不可以改变代码返回个script,所以前5种方案都被我否决掉.最后因为我的网站是我自己的主机,所以我决定搭建一个nginx并把相应代码部署在它的下面,由页面请求本域名的一个地址,转由nginx代理处理后返回结果给页面,而且这一切都是同步的. 关于nginx的一些基本配置和安

express 设置header解决跨域问题

//设置跨域访问 app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT"); // res.header("Access-Control-Allow-Head

webpack代理解决跨域问题

new WebpackDevServer(webpack(config), { hot:hot, inline: true, compress: true, //去掉真实ip的检测 disableHostCheck: true, stats: { chunks: false, children: false, colors: true }, historyApiFallback: true, proxy: { '/api/**/*': {//接口开头关键字 *表示全部 target: 'http