解决Vue2跨域报错AxiosError net::ERR_FAILED、 Network Error、ERR_NETWORK

目录
  • 请求场景：
  • 跨域报错信息
  • Vue2跨域问题报错截图
  • 解决方法
  • 解决方法解析：
  • 总结

请求场景：

当前页面URL：http://127.0.0.1:8000/testcase

跳转请求页面URL：http://127.0.0.1:5000/testcase_orm

使用axios请求 时 页面提示跨域报错

跨域报错信息

Access to XMLHttpRequest at ‘http://127.0.0.1:5000/testcase_orm’ from
origin ‘http://localhost:8080’ has been blocked by CORS policy: No
‘Access-Control-Allow-Origin’ header is present on the requested
resource.

AxiosError {message: ‘Network Error’, name: ‘AxiosError’, code:
‘ERR_NETWORK’

Vue2跨域问题报错截图

通过对代码以及报错信息分析，问题出现在跨域请求上，（跨域请求：跨域是指浏览器不允许当前所在的源请求去访问另一个不一样的源请求，源是指请求协议、域名、端口号，这三个如果有一个不一致就是跨域请求）

当前URL 请求URL 是否跨域 结果分析
http://www.kuakuakua.com http://www.kuakuakua.com/index.html 否 同源（域名、协议、端口号一致）
http://www.kuakuakua.com https://www.kuakuakua.com 跨域 协议不同（http/https）
http://www.kuakuakua.com http://www.javashuo.com/ 跨域 域名不同（www.kuakuakua.com/www.javashuo.com）
http://www.kuakuakua.com:8080 http://www.kuakuakua.com:8081 跨域 端口号不同（8080/8081）

解决方法

步骤一：在项目目录下找到 vue.config.js 文件打开编辑

步骤二：按照图中的结构，将给出的代码复制到 module.exports 中

devServer: {
    proxy: {
      "/proxy_url":{           // /proxy_url 这个用来和根路径 baseURL 进行匹配
        target: 'http://127.0.0.1:5000',  // 这个是填写跨域的请求域名+端口号，也就是要请求的URL(不包含URL路径)
        changeOrigin: true,  // 是否允许跨域请求，在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: {   // 路径重写
            '^/proxy_url': '/' // 替换target中的请求地址，原请求为 http://127.0.0.1:8000/kuayu 实际请求为 http://127.0.0.1:8000/proxy_url/kuayu
        }
      }
    }
  }

步骤三：找到main.js文件，将axios.defaults.baseURL 设置为 /proxy_url

axios.defaults.baseURL = ‘/proxy_url'

步骤四：然后xxx.vue文件中的methods中的axios请求正常使用就可以了 此处的完整请求URL是
http://127.0.0.1:5000/testcase_orm（步骤四只是提供一个示例，具体的请求URL按照自己项目的URL去请求）

methods:{
    getCaseList: function(){
        console.log("xxxxxxxxx")
        console.log('查看接口调用是否成功')
        this.$axios.get('/testcase_orm').then((result)=>{
             console.log('查看接口调用是否成功，被调用则成功')
             console.log(result)
        })
    }
  }

解决方法解析：

跨域问题，可以让服务端去添加请求头字段信息以及允许跨域访问，服务端的跨域问题不在本文章描述，感兴趣可以去看博主的另一篇Django跨域问题解决的博文

vue跨域问题本次使用的是代理方案进行解决，通过本地服务器进行代理转发到目标服务器，跨域只针对浏览器，对于node服务发出的请求时不会出现跨域问题，从而解决浏览器跨域问题。

总结

到此这篇关于解决Vue2跨域报错AxiosError net::ERR_FAILED、 Network Error、ERR_NETWORK的文章就介绍到这了,更多相关Vue2跨域报错AxiosError net内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue使用vite配置跨域以及环境配置详解

    vue使用vite配置跨域以及环境配置详解

    目录 如何配置跨域,代理域名 区分开发环境和生产环境,以及预发布环境 可以做什么事 补充:解决跨域常用方法 一.VUE中常用proxy来解决跨域问题 二.JSONP解决跨域 三.CORS是跨域资源共享(Cross-Origin Resource Sharing),以 ajax 跨域请求资源,支持现代浏览器,IE支持10以上 四.iframe实现跨域 总结 如何配置跨域,代理域名 不管使用什么脚手架,配置代理都是绕不开的话题,下面是vite的代理 server: { proxy: { '/api'

  • vue中proxy代理的用法(解决跨域问题)

    目录 声明 1. 首先我们应该知道 2. 跨域,什么是跨域呢? 问题 跨域的解决方案 代理服务器是如何解决跨域的? proxy配置 以vue cli3.0为例 总结 声明 1. 首先我们应该知道 前端axios在本地发送的请求如果你不把路径写全,它都是会默认加上自己项目所在的端口,就比如说: axios.get('/login') axios.get('/hello') 当我点击发送按钮之后,以上两行代码实际为: http://localhost:8080/login http://localh

  • VUE跨域详解以及常用解决跨域的方法

    VUE跨域详解以及常用解决跨域的方法

    目录 跨域 解决跨域常用方法: 一.VUE中常用proxy来解决跨域问题 二.JSONP解决跨域 三.CORS是跨域资源共享(Cross-Origin Resource Sharing),以 ajax 跨域请求资源,支持现代浏览器,IE支持10以上 四.iframe实现跨域 总结 跨域 当我们遇到请求后台接口遇到 Access-Control-Allow-Origin 时,那说明跨域了. 跨域是因为浏览器的同源策略所导致,同源策略(Same origin policy)是一种约定,它是浏览器最核

  • vue项目中常用解决跨域的方法总结(CORS和Proxy)

    目录 一.什么是跨域? 二.如何解决跨域? 总结 一.什么是跨域? 跨域问题的出现是因为浏览器的同源策略问题.所谓同源就是必须有以下三个相同点:协议相同.主机相同.端口相同.如果其中有一项不同,即出现非同源请求,就会产生跨域.当我们请求一个接口的时候,出现如:Access-Control-Allow-Origin 字眼的时候说明请求跨域了 二.如何解决跨域? 跨域的解决方案: jsonpcorsNode中间件代理(两次跨域) 即 Proxynginx反向代理 CORS支持所有类型的HTTP请求,

  • vue3解决跨域问题详细代码亲测有效

    目录 vue3解决跨域问题详细代码亲测有效 关于解决vue3的跨域问题 项目场景: 原因分析: 解决方案: vue3解决跨域问题详细代码亲测有效 1.在vue.config.js中 放入以下代码: module.exports = { devServer: { proxy: { '/api': { target: 'http://api.tubecoin.org', //这里填入你要请求的接口的前缀 ws: true, //代理websocked changeOrigin: true, //虚拟

  • vue代理模式解决跨域详解

    目录 跨域是什么 解决跨域 1.在vue.config.js中这样写: 2.创建一个http.ts(我是ts的,你也可以js): 3.创建一个request.ts: 4.这样使用: 跨域是什么 简单的讲就是你在一个地方使用另一个地方的资源,被浏览器给挡下来了,不让不用!当然,它挡下来是有自己理由的:为了安全(╬▔皿▔)╯. 解决跨域 我是用vue开发的,就vue代理模式解决跨域说明一下. 1.在vue.config.js中这样写: let devProxy = {   //获取ip信息   '/

  • vant/vue跨域请求解决方案

    因为后端给的接口不是本地的接口,所以需要跨域来获取接口数据 在vue.config.js中对其进行配置 devServer: { host: 'localhost', port: 3030, // 端口 https: false, proxy: { // 配置跨域 '/api': { target: 'http://xx.xx.xx.xxx', // 代理的接口域名以及端口号: ws: true, // 支持ws协议:websocket的缩写: changeOrigin: true, // 是否

  • 解决Vue2跨域报错AxiosError net::ERR_FAILED、 Network Error、ERR_NETWORK

    目录 请求场景: 跨域报错信息 Vue2跨域问题报错截图 解决方法 解决方法解析: 总结 请求场景: 当前页面URL:http://127.0.0.1:8000/testcase 跳转请求页面URL:http://127.0.0.1:5000/testcase_orm 使用axios请求 时 页面提示跨域报错 跨域报错信息 Access to XMLHttpRequest at ‘http://127.0.0.1:5000/testcase_orm’ fromorigin ‘http://loc

  • vue2安装vue-router报错的解决方法

    vue2安装vue-router报错的解决方法

    目录 项目场景: 问题描述: 原因分析: 解决方案: 附加: 总结 项目场景: 在vue2中安装vue-router 问题描述: 提示:在安装过程中报错,缺少依赖: PS D:\WebDeplpyer\workspace\Vue_Basic\vue_test> npm i vue-routernpm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency treenpm ERR!npm ERR! While resolvi

  • Nginx 解决WebApi跨域二次请求以及Vue单页面的问题

    Nginx 解决WebApi跨域二次请求以及Vue单页面的问题

    一.前言 由于项目是前后端分离,API接口与Web前端 部署在不同站点当中,因此在前文当中WebApi Ajax 跨域请求解决方法(CORS实现)使用跨域处理方式处理而不用Jsonp的方式. 但是在一段时间后,发现一个很奇怪的问题,每次前端发起请求的时候,通过浏览器的开发者工具都能看到在Network下同一个url有两条请求,第一条请求的Method为OPTIONS,第二条请求的Method才是真正的Get或者Post,并且,第一条请求无数据返回,第二条请求才返回正常的数据. 二.原因 第一个O

  • 深入浅析Jsonp解决ajax跨域问题

    深入浅析Jsonp解决ajax跨域问题

    一.介绍 最近跨域问题比较多,而且自己刚好也看到这一块,就总结了一下,关于JSONP的东西百度的话东西确实很多,很多人都是复制别人的,如此下去,其实找的资料就那么几份,关键是我还看不懂,可能是能力问题吧,自己经过很多尝试,所以总结了一下,终究还是弄懂了皮毛.注意一点是,这里是用Jsonp解决ajax的跨域问题,具体的实现其实不是ajax. 1.同源策略 浏览器有一个很重要的概念--同源策略(Same-Origin Policy).所谓同源是指,域名,协议,端口相同.不同源的客户端脚本(JavaS

  • 完美解决ajax跨域请求下parsererror的错误

    ajax请求报parsererror错误是很宽泛的概念,很多情况下都报这个错, 在很多时候,即使ajax提交.返回都正常 XMLHttpRequest.status=200  (正常响应) XMLHttpRequest.readyState=4 (正常接收) ajax也会提示一个parseerror的错误. 出现这个错误,大都是不良书写习惯,或者语法不当造成的. 关于ajax的错误,请使用: error:function(XMLHttpRequest, textStatus, errorThro

  • java解决请求跨域的两种方法

    java解决请求跨域问题,有以下两种写法 1.使用拦截器,实现javax.servlet.Filter接口 import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; import javax.servlet.ServletRequest; import javax.servlet.S

  • 解决SpringBoot跨域的三种方式

    一.什么是跨域 1.1.为什么会出现跨域问题 出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现.同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互.所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port) 简单说A应用只能访问

  • springboot 如何解决cross跨域请求的问题

    springboot 如何解决cross跨域请求的问题

    目录 springboot 解决cross跨域请求 1.使用ajax发送跨域请求接口时 2.在被跨域请求的一方配置 3.再次测试 4.对于只有个别需要开放跨域请求的接口可以这样玩 5.其它解决跨域请求的常用方法 Spring解决cross domain Spring4: Spring3旧版本: springboot 解决cross跨域请求 1.使用ajax发送跨域请求接口时 接口能正常接收到请求并响应,但是无法正常展示响应数据.跨域请求时会在有一个特别的请求头origin(请求来源). 浏览器认

  • 详解springboot解决CORS跨域的三种方式

    详解springboot解决CORS跨域的三种方式

    目录 一.实现WebMvcConfigurer接口 二.实现filter过滤器方式 三.注解@CrossOrigin 四.实战 五.cookie的跨域 一.实现WebMvcConfigurer接口 @Configuration public class WebConfig implements WebMvcConfigurer { /** * 添加跨域支持 */ @Override public void addCorsMappings(CorsRegistry registry) { // 允

  • 跨域浏览器设置解决前端跨域问题

    目录 一.什么是跨域 二.什么情况下会出现跨域 三.uni-app 项目 解决跨域办法 四.Vue.js 项目 解决跨域办法 五.终极解决办法,删除浏览器跨域限制 一.什么是跨域 出于浏览器的同源策略限制.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.知识点:跨域只会出现在浏览器上,小程序和APP开发不会有跨域问题 二.什么情况下会出现跨域 说人话就是域名不同的时候会出现跨域.下面以 百度 域名为例,在域名的:协议.主机名.域名.

随机推荐