VUE跨域问题Access to XMLHttpRequest at

目录
  • 问题描述
  • 解决方案
  • 解决

问题描述

VUE发送请求的时候不能请求到正确数据，控制台如下

Access to XMLHttpRequest at 'http://localhost:8000/equip_fault_report/all' from origin 'http://localhost:8080' has been 
blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我的请求js中的URL是这样的

解决方案

在配置js中写入如下

devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8000',
                changeOrigin: true,
                pathRewrite: {
                    '/api': ''
                }
            }
        }
    }

解读为加链接头，开启跨域，加/api作为识别。
意为请求/api下的链接，直接回转到target

请求js的URl如下

解决

到此这篇关于VUE跨域问题Access to XMLHttpRequest at 的文章就介绍到这了,更多相关VUE跨域问题内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 关于vue 项目中浏览器跨域的配置问题

    1.什么是跨域 当一个请求url的协议.域名.端口三者之间任意一个与当前页面url不同即为跨域. 2.同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现. 3.在项目中配置 打开项目找到config文件下的index.js,在js proxyTable中配置跨域,代码如下 proxyTable: { '/api':

  • Vue如何解决跨域问题详解

    Vue如何解决跨域问题详解

    什么是跨域 跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据.源指协议,端口,域名.只要这个3个中有一个不同就是跨域. 这里列举一个经典的列子: #协议跨域http://a.baidu.com访问https://a.baidu.com:#端口跨域http://a.baidu.com:8080访问http://a.baidu.com:80:#域名跨域http://a.baidu.com访问http://b.baidu.com: 通常在不同服务器访问过程中可能会遇到跨域问题,也就是口头上常说

  • vue解决跨域问题(推荐)

    一.什么是跨域 跨域问题的出现是因为浏览器的同源策略问题,所谓同源:就是两个页面具有相同的协议(protocol),主机(host)和端口号(port),它是浏览器最核心也是最基本的功能,如果没有同源策略我们的浏览器将会十分的不安全,随时都可能受到攻击. 当我们请求一个接口的时候,出现如:Access-Control-Allow-Origin 字眼的时候说明请求跨域了 二.如何解决跨域问题 1.使用jsonp实现,网页通过script标签向服务器请求json数据,服务器受到请求后,将数据放在一个

  • vue中前端代理跨域问题实例总结

    vue中前端代理跨域问题实例总结

    目录 前言 第一 第二 第三 代码 总结 前言 这几天在学习vue进行前后端交互时出现了跨域问题,也是经历查文章查文档和自己实践总结才最终解决.这篇文章就对此进行总结,以防忘记,同时也希望能对正在经历该问题困扰的同学们有所帮助.注意:这里讲解的是vue2.x版本的方法! 第一 首先我们需要先确定我们所使用的接口名,我这里使用的自己Java后端的接口和python后端的接口 http://localhost:8081/articles/findArticlePagehttp://127.0.0.1

  • Vue跨域请求问题解决方案过程解析

    一.这是我们本次要请求的url接口地址http://iwenwiki.com/api/blueberrypai/getBlueBerryJamInfo.php 查看页面响应信息,提示跨域有问题 #### 二.解决上面跨域问题:根目录写入以下vue.config.js // vue.config.js module.exports = { devServer: { proxy: { // 配置跨域 '/api': { target: 'http://iwenwiki.com', ws: true,

  • vue 处理跨域问题及解决方法小结

    当你在发送网络请求的时候,出现以下保存信息,恭喜你跨域了 Access to XMLHttpRequest at 'XXXXX' from origin 'XXXXXX' has been blocked by  CORS policy: Response to preflight request doesn't pass access control check:  No 'Access-Control-Allow-Origin' header is present on the reques

  • 前端vue打包项目,如何解决跨域问题

    前端vue打包项目,如何解决跨域问题

    目录 vue打包项目解决跨域 vue项目解决跨域(打包上线无需手动切换url) vue打包项目解决跨域 前段时间做一个vue打包成安卓和IOS的App,遇到了跨域问题,直接拿了之前项目的配置,却不起作用. import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.spri

  • VUE跨域问题Access to XMLHttpRequest at

    VUE跨域问题Access to XMLHttpRequest at

    目录 问题描述 解决方案 解决 问题描述 VUE发送请求的时候不能请求到正确数据,控制台如下 Access to XMLHttpRequest at 'http://localhost:8000/equip_fault_report/all' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the r

  • Spring Boot和Vue跨域请求问题原理解析

    这篇文章主要介绍了Spring Boot和Vue跨域请求问题原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 使用Spring Boot + Vue 做前后端分离项目搭建,实现登录时,出现跨域请求 Access to XMLHttpRequest at 'http://localhost/open/login' from origin 'http://localhost:8080' has been blocked by CORS pol

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

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

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

  • vue跨域解决方法

    vue跨域解决方法

    vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报"No 'Access-Control-Allow-Origin' header is present on the requested resource." 这种跨域错误. 要想本地正常的调试,解决的办法有三个: 一.后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control

  • 利用SpringMVC过滤器解决vue跨域请求的问题

    之前写过通过注释的方法解决跨域请求的方法,需要每次都在controll类使用注解,这次通过springmvc的拦截器解决: 继承SpringMVC的类HandlerInterceptor重写preHandle方法,这个方法会在到达 controll之前调用,如下 public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

  • 解决vue跨域axios异步通信问题

    在项目中,常常需要从后端获取数据内容.特别是在前后端分离的时候,前端进行了工程化部署,跨域请求成了一个前端必备的技能点.好在解决方案很多. 在vue中,在开发中,当前使用较多的是axios进行跨域请求数据,但不少人遇到如下问题: •异步通信,无法同步执行 •无法集中管理 •不便阅读 •还未请求成功就调转了 •then里面的逻辑越来越繁杂 以往的网络请求的写法如下: // main.js // 引入axios import axios from 'axios' Vue.prototype.$axi

  • 记一次vue跨域的解决

    好久不见,今天想写的是前段时间碰到的一个小问题.其实故事背景是前端的同学跟我说他们前端请求不了我后端的数据,说是跨域了. 其实跨域的问题,在如今前后端的时代非常常见,如果图方便的话,一般是在后端的请求以及拦截器中设置header,但是有一些业务需求单纯后端是解决不了的.还是需要前端自行来处理,这次碰到的就是前端需要自行处理的情况. 这里我不细说跨域的解决方案,只聊聊我是怎么解决的.如果大家想要知道更详细的跨域知识,可以点个在看!我下次写一个专题. vue跨域代理解决方案 其实需求比较简单,就是先

  • vue跨域处理方式(vue项目中baseUrl设置问题)

    vue跨域处理方式(vue项目中baseUrl设置问题)

    目录 vue跨域处理(baseUrl设置问题) 一.方法一 二.方法二 三.方法三 vue请求不同的域名,baseURL配置 vue跨域处理(baseUrl设置问题) 一.方法一 在公用文件common.js中设置baseUrl export var baseUrl = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : '/api' 该方法的优点:在项目打包时,static下面的文件是不会被webpack处理的,所以可以通过改变s

  • vue跨域proxy代理配置详解

    vue跨域proxy代理配置详解

    目录 引言 例一 例二 总结 引言 相信很多人都用过proxy,这里就不多说proxy的基本使用,这里要说一下很多人使用proxy的一个误区,大家一般都是直接将管官方的例子拿过来,修改一下代理目标直接就是用了,但是代理的路径匹配你真的会用么? 如果你能够认证看完那么我保证你下次再配置代理的时候就能一步就能完成,无需多次npm run serve 先来一个正则热热身待会需要用,看懂了再往下看: 例一 这是我使用express自己搭建的一个超级简单的服务器,代码如下(没有设置允许跨域请求) // 引

  • Django+vue跨域问题解决的详细步骤

    跨域 由于开发模式为前后端分离式开发,故而通常情况下,前端和后端可能运行不同的ip或者port下,导致出现跨域问题,故而单独说明 什么是跨域 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景. 什么是同源策略? 同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS.

随机推荐