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地址了。

顺便说下,里边加个时间戳的作用,是为了防止本地缓存的作用。

原文地址:https://www.cnblogs.com/sweeeper/p/11282137.html

时间: 2024-11-06 03:40:58

vue工程本地代码请求http发生跨域提示错误解决方法的相关文章

AJAX及其跨域的主要解决方法

AJAX = Asynchronous JavaScript andXML(异步的 JavaScript 和 XML).通过在后台与服务器进行少量数据交换,使网页实现异步更新.要明白异步交互可以通过同步和异步的对比很容易明白: 同步交互,就是最常见的click-refresh模式,点一个连接或提交一个表单,然后就必须重载整个页面 异步交互,javascript根据返回的数据,不刷新页面而改变当前页面的显示,例如:新浪微博,百度地图. Ajax的异步交互从XMLHttpRequest这个对象开始,

海康、大华等网络摄像头RTSP_Onvif网页无插件直播流媒体服务器EasyNVR鉴权出现跨域问题的解决方法

背景分析 随着平安城市.智慧城市.雪亮工程.智能交通等各项建设的持续开展,安防逐渐得到普及,面对如此广阔的市场,对安防企业来说不仅仅是机遇更多的是挑战.现今大多数摄像头一直没能摆脱人工监控的传统监控方式,由此导致了大量视频数据堆积占用存储资源.实时性差.检索困难等问题,海量摄像头带来的海量视频数据检索工作需要耗费大量警力. 为了解决这些问题,近年来,视频监控行业发展方向主要为:“高清化.网络化.智能化”.视频监控设备技术性极强,系统的创新升级同时也在引导市场需求的变化并创造了新的市场需求. Ea

jquery ajax跨域的完美解决方法(jsonp方式)

ajax跨域请求的问题,JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式,接下来为大家详细介绍下客户端JQuery.ajax的调用代码 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquer

SpringBoot+Ajax跨域安全问题及解决方法

〇.遇到跨域安全问题 在学习SpringBoot过程中,遇到了这样一个问题.当时用SpringBoot开发Rest服务接口,然后用Ajax请求获取数据,来实现前后端分离.但是在前端请求时,始终不能显示应该显示的数据.从浏览器的控制台报错来看(如下图),应该是遇到了跨域安全的问题. 一.为什么会出现跨域安全问题? 要解决这个问题,首先得知道为什么会出现这个问题.通过了解,出现跨域安全问题的原因一般是以下三个问题:浏览器收到了正确的返回数据但是做出了限制.发出去的请求是XMLHttpRequest请

跨域几种解决方法

1.jsonp  目标服务器设置callback 函数   服务器操作   2.cors  服务器设置header :Access-Control-Allow-Origin   服务器操作 eader('content-type:application:json;charset=utf8'); // 指定允许其他域名访问 //header('Access-Control-Allow-Origin:http://www.example.com'); 例子 header('Access-Contro

vue-socket.io跨域问题的解决方法

报错信息: 1 Access to XMLHttpRequest at 'http://192.168.37.130:5050/socket.io/?EIO=3&transport=polling&t=N0oqNsW' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested

访问腾讯存储桶中的文件,跨域问题的解决

报错如上图,场景:前端同事在使用js请求时,引出来的这个问题. 就报错而言不难解决,在对相应的桶做一个cors配置即可.但问题是依旧是报跨域的错,配置了跨域头未生效. 究其原因,大概率是可能在用户第一次访问cdn,cdn会检查数据没有,回源到源站进行访问.源站对比将数据经过cdn反馈给客户端浏览器.浏览器比对Access-Control-Allow-Origin 后,允许正确,所以跨域正常. 当第二个用户访问时,cdn检测有这个文件,所以会直接给客户端反馈缓存页面.由于CDN之所以失败是因为CD

客户端ajax请求为实现Token验证添加headers后导致正常请求变为options跨域请求解决方法

客户端为了实现token认证,通过Jquery的ajaxSetup方法全局配置headers: 全局配置headers后会导致部分不需要token认证的请求变为options请求,导致跨域访问.报错信息如下: CORS概念 支持CORS请求的浏览器一旦发现ajax请求跨域,会对请求做一些特殊处理,对于已经实现CORS接口的服务端,接受请求,并做出回应. 有一种情况比较特殊,如果我们发送的跨域请求为"非简单请求",浏览器会在发出此请求之前首先发送一个请求类型为OPTIONS的"

jQuery异步请求(如getJSON)跨域解决方案

相信大家在使用jQuery异步请求非自己网站内相对资源(通过别人站点上的URL直接读取)使经常会遇到如下错误吧,实际上这些错误都是浏览器安全机制“搞的鬼”,才让我们开发路上遇到了拦路虎. 当你直接在浏览器中请求:“http://www.weather.com.cn/adat/sk/101110101.html”时会得到你需要的json数据. 当你通过jQuery的getJSON方法读取时你就会得到下列错误. Chrome提示错误: XMLHttpRequest cannot load http: