vue工程本地代码请求http发生跨域提示错误解决方法
这个可以使用代理进行跨域,这样看来跨域的方法就有几种了,对于iframe中的用postmassage,对于vue工程中的跨域则使用代理模式。
代理模式配置如下:
在config文件夹下找到index.js文件。找到module.exports下边的proxyTable属性,改成:
// proxyTable: {},//代理才能跨域发送请求 proxyTable: devEnv.OPEN_PROXY === false ? {} : { '/proxyApi': { target: 'http://192.168.10.30:10308/',//目的ip changeOrigin: true,//跨域 pathRewrite: { '^/proxyApi': '/' } } },
其中devEnv是我从当前同目录文件夹下的dev.env.js中const devEnv = require('./dev.env')引入的变量。dev.env.js内容为:
'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', OPEN_PROXY: true // 是否开启代理, 重置后需重启vue-cli })
另外在配置下axios请求路径中的
const defaultBaseUrl = 'http://192.168.10.30:10308' const BASEURL = process.env.NODE_ENV != 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : defaultBaseUrl export default { //接口代理配置 loginTocken:BASEURL+'/config/user_login.action', }
其中process.env值在dev.env.js中:
'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', OPEN_PROXY: true // 是否开启代理, 重置后需重启vue-cli })
结果:
划红线的地方就被代理到那个IP地址了。
顺便说下,里边加个时间戳的作用,是为了防止本地缓存的作用。
vue工程本地代码请求http发生跨域提示错误解决方法的更多相关文章
- Vue 项目中遇到的跨域问题及解决方法
原文:https://www.jb51.net/article/137278.htm 问题描述 前端 vue 框架,跨域问题后台加这段代码 header("Access-Control-Al ...
- .Net 站点跨域问题及解决方法
一.什么是站点跨域 了解跨域之前, 先了解下什么同源策略?百度百科:同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功 ...
- 跨域问题及其解决方法(JSONP&CORS)
一.什么是跨域 当a.qq.com域名下的页⾯或脚本试图去请求b.qq.com域名下的资源时,就是典型的跨域行为.跨域的定义从受限范围可以分为两种,⼴义跨域和狭义跨域. (一)广义跨域 ⼴义跨域通常包 ...
- json跨域原理及解决方法
这一篇文章呢,主要是之前一直听别人讲json跨域跨域,但是还是一头雾水,只知其一,于是一怒之下,翻阅各种资料,如果有不正确的地方,劳烦指正一下^_^ 首先,先了解浏览器有一个很重要安全性限制,即为同源 ...
- jquery ajax跨域的完美解决方法(jsonp方式)
ajax跨域请求的问题,JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式,接下来为大家详细介绍下客户端JQuery.ajax的调用代码 今天在项目中需要做远程数据加载 ...
- AJAX及其跨域的主要解决方法
AJAX = Asynchronous JavaScript andXML(异步的 JavaScript 和 XML).通过在后台与服务器进行少量数据交换,使网页实现异步更新.要明白异步交互可以通过同 ...
- luffy后端之跨域corf的解决方法
跨域CORS 我们现在为前端和后端分别设置两个不同的域名 window 系统: C:\Windows\System32\drivers\etc\host linux/mac系统: /etc/hosts ...
- react+spring 记录跨域问题的解决方法
react 跨域访问后台,默认是有跨域问题,并且火弧和谷歌浏览器,对跨域问题展示还不一样. 谷歌浏览器如下图: 此处状态是200,然而在Response却没有任何信息,如下图 然而火弧浏览器,对该问题 ...
- chrome 阻止跨域操作的解决方法 --disable-web-security
做chrome插件时,遇到https页面上请求htttp页面资源时被blocked的问题,初苦寻解决方法未果,最后找到: 给chrome加上 --disable-web-security 参数
随机推荐
- ubuntu搭建jdk+jenkins
第一步,安装jdk(如果已安装,直接进行第二步) 1.下载 jdk-8u172-linux-x64.tar.gz 点此下载 2.解压 tar -zxvf jdk-8u172-linux ...
- jQuery基础--总结
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
- java.lang.NumberFormatException: For input string: "title"异常
java.lang.NumberFormatException: For input string: "title" at java.lang.NumberFormatExcept ...
- 自定义ThreadLocal和事务(基于自定义AOP)
参考<架构探险--从零开始写javaweb框架>4.6章节 自定义ThreadLocal package smart; import java.util.Collections; impo ...
- MyEclipse停止自带插件的启动
MyEclipse启动时因为自身带有很多的插件,所以在启动时运行的速度特别慢,所以可以选择一下启动时的插件,将不使用的插件选择在MyEclipse启动时不起动. 步骤如下: windows->p ...
- tmux多终端工具
在Linux服务器上没有办法像在桌面系统一样开多个终端,所以有时后进行一些操作不是太方便,所以可以使用tmux工具,创建多个终端. 这里仅仅是简单的介绍一下如何创建多个终端和进行多个终端之间切换,tm ...
- 组件化框架设计之AOP&IOC(四)
阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680 本篇文章将从以下两个方面来介绍组件化框架设计: [AOP(面向切 ...
- luogu P3657 (NOIP2017) 跳房子(二分+DP+单调队列)
题面 传送门 分析 显然答案有单调性,可以二分答案,设当前二分值为g,根据题意我们可以求出跳跃长度的范围[l,r] 考虑DP 子状态: dp[i]表示跳到第i个点时的最大和 状态转移方程 \(dp[i ...
- 1. ZooKeeper简介
1. ZooKeeper是什么 ZooKeeper致力于提供一个高性能.高可用,且具备严格的顺序访问控制能力的分布式协调服务,是雅虎公司创建,是Google的Chubby一个开源的实现,也是Hadoo ...
- linux的vsftp使用介绍
vsftp 常用操作 安装 yum install vsftpd 启动服务 service vsftpd start 开启自动启动 chkconfig --level 35 vsftpd on 关闭匿 ...