vue.js中使用vueResource向后台请求数据时出现跨域访问失败的问题

最新推荐文章于 2019-06-05 21:59:24 发布
最新推荐文章于 2019-06-05 21:59:24 发布
阅读量7.8k 收藏
点赞数
分类专栏： web前端 文章标签： 数据 域名
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010957664/article/details/54236207
版权

最近学习了vue.js,打算试着写一个个人博客的系统，后台使用的是pyramid框架，数据库用的是mongoDB。

当我在一个单文件组件中请求后台提供的接口时，使用了vueResource提供的this.$http方法


出现了No 'Access-Control-Allow-Origin' header is present on the requested resource的错误，上网查了一下发现这是跨域访问导致的问题。


由于同源策略的原因，我运行vue的代码时，打开的是localhost:8080这个域名，启动后台pyramid的服务时，使用的是127.0.0.1:6543这个域名，同一域名下端口号不同，确实会产生无法跨域访问的问题。

按照chrome的报错提示，我将后台的函数中的response对象添加了headers的值，如图


然后重新启动服务器，发现可以正常的跨域访问并获取到后台传来的数据了。


黄啊黄
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue.js 中 axios 跨域访问错误问题及解决方法
10-17
主要介绍了Vue.js 中 axios 跨域访问错误问题及解决方法，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
学习Vue（14）——使用vue-resource发送请求
二木成林
01-18 663
介绍 vue-resource是vue.js的一款插件，通过XMLHttpRequest或JSONP发起请求并处理响应. vue-resource是vue 1推荐使用的，而axios是vue 2.0 推荐使用的，其实两个都可以向后端发送请求，获取响应。 安装 由于vue-resource.js是vue的一段插件，所以需要安装。 安装到本地请参考：https://blog.csdn.net...
解决 js ajax跨域访问报“No 'Access-Control-Allow-Origin' header is present on the requested resource.”错误
热门推荐
idomyway的博客
03-15 5万+
在实现不同端口号之间访问时遇到了跨域报错问题前言从 http://www.a.com/test.html 发起一个跨域请求， 请求的地址为： http://www.b.com/test.PH在本地用ajax跨域访问请求时报错：XMLHttpRequest cannot loadhttp://www.zjblogs.com/. No 'Access-Control-Allow-Origin' he
vue-resource的跨域使用
QooX5的博客
02-28 3081
首先安装vue-resource：npm install vue-resource --save然后引入import VueResourse from 'vue-resource'; Vue.use(VueResourse)vue-resource的请求API是按照REST风格设计的，它提供了7种请求API：get(url, [options])head(url, [options])delete...
vue-resource 解决跨域问题
小鹅鹅的博客
03-28 1万+
vue 与 vue-resource 跨域问题解决方法一：在vue项目下的 config/index.js 文件里面配置代理proxyTable:var path = require('path')module.exports = { build: { env: require('./prod.env'), index: path.resolve(__dirname, '../d
Vue开发环境下调用接口跨域问题
Escape This Moment
08-17 5517
需在工程目录config/index.js内对proxyTable项进行如下配置: proxyTable: { '/api': { target: 'http://xxxxxx.com', changeOrigin: true, pathRewrite: { '^/api': '' } }
vue.global.js，Vue.js 框架的核心文件之一
最新发布
08-11
`vue.global.js` 文件是 Vue.js 框架的核心文件之一。它包含了 Vue.js 全局对象的定义和一些全局方法和属性的实现。 该文件对整个 Vue.js 应用的运行起着重要的作用，它提供了全局范围的 Vue 构造函数和一些全局...
vue.js使用代理和使用Nginx来解决跨域的问题
11-27
使用Nginx 反向代理解决跨域问题（vue.js使用代理去掉vue.js因为跨域而触发的options请求） 我们的项目还是需要node.js作为容器的 一、Windows 下安装Nginx （官网下载稳定版http://nginx.org/en/download.html） 二...
vue.js与后台数据交互的实例讲解
10-18
今天小编就为大家分享一篇vue.js与后台数据交互的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于 Vue.js 开发的在线考试管理员后台前端源码.zip
05-07
基于 Vue.js 开发的在线考试管理员后台前端源码 基于 Vue.js 开发的在线考试管理员后台前端源码 基于 Vue.js 开发的在线考试管理员后台前端源码 基于 Vue.js 开发的在线考试管理员后台前端源码 基于 Vue...
vue-resource报跨域错误
zlq_CSDN的博客
06-05 855
问题报错： Access to XMLHttpRequest at ‘http://127.0.0.1:3000/api/getStuList’ from origin ‘http://localhost:63342’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the...
如何解决vue-resource跨域问题vue-resource jsonp请求问题
surprise_bao的博客
05-07 1613
如何解决vue-resource跨域问题vue-resource jsonp请求问题 在项目config目录下的index.js文件中的"dev"下，添加下面的代码，并改变使用的路径 proxyTable: { '/api': { target: 'http://localhost:80/', changeOr...
vue-resource 跨域 post请求 示例
guxiansheng1991的博客
03-27 2万+
vue-resource 能够跨域,一般使用jsonp,但是当需要发送大量的参数到服务器的时候,需要使用post请求.本文讲述跨域post请求,当然也包括jQuery的使用示例. 需要后端工程师配合设置 Access-Control-Allow-Origin 为 *vue-resource 用法this.$http.post("http://localhost:8080/cors/cors/Cor
前端vue.js 后端spring boot，跨域访问302和403错误
minosisterry的博客
07-19 1万+
前提：已经设置好跨域请求所需了，其他请求是正常的 问题现象：前端访问后端时，请求为302错误，总是被重定向为/admin/login； 后台报错页面不存在 问题所在：后台的requestmapping写错了，和前端请求的网址不一样。因为都是按接口文档写的，但是有一个字母的大小写出了问题，导致访问的页面不存在 这个bug全项目组调了一下午都没调出来...
Vue.js打包静态网页出现空白或路径错误的问题解决方案
进击的小宇宙
04-23 5084
一、 问题描述 用脚手架vue-cli编写的工程，使用”npm run build”打包出静态网页，不管是直接打开还是放在服务器里，都是空白一片，检查日志或者网络请求发现路径错误。 二、 问题原因 脚手架配置文件中路径需要修改。 三、 解决方案 1. 找到”/config/index.js”文件，build部分，将”assetsPublicPath”值改为”./”，...
java后台+vue前端，解决jsonp跨域问题(有数据返回的，但是Response的body或者data为空)
Angus的博客
08-28 1万+
 前端Vue采用jsonp方法访问后台数据 前端请求代码： getAllList() { //导入Vue-resource.js,通过this.$http发起数据请求 //this.$http.get('url').then(function(result）{}) //通过then指定回调函数，可获取服务器返回的数据 //判断result.status是否等于200,200为请求成功...
vue.js 部署到tomcat中出现访问路径不对,页面加载不出来问题及解决
guxiansheng1991的博客
03-21 1万+
问题:vue.js 部署到tomcat上之后,访问index.html文件,打开浏览器控制台,出现css,js,img等路径不对,返回404. 打包路径: +dist +static +css +js +image -index.html解决先说一下我的方法:1.在tomcat的webapps下新建test文件夹, 然后把static文
vue.js 中 axios 跨域访问错误问题及解决方法
07-15
### 回答1： vue.js 是一个开源的 JavaScript 框架，用于构建用户界面，而 axios 是一个基于 promise 的 HTTP 客户端，用于在浏览器和 Node.js 中发送 HTTP 请求。 在 vue.js 中使用 axios 进行跨域访问时，可能会出现跨域访问错误。跨域是指在浏览器中通过 JavaScript 发起一个 HTTP 请求，该请求的目标服务器是与当前页面不同域名、端口或协议的地址。 解决这个问题的方法有多种： 1. 后端配置允许跨域访问：在后端服务器中进行配置，允许指定的域名或端口进行跨域访问。 2. 使用代理进行跨域请求：在 vue.config.js 文件中配置代理，将跨域请求转发到目标服务器。例如，在 vue.config.js 文件中添加以下配置： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://api.example.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } }; ``` 这样，当你在前端代码中发送以“/api”开头的请求时，将会使用代理进行跨域请求。 3. JSONP：如果目标服务器支持 JSONP，可以使用 JSONP 进行跨域请求。在 axios 中，默认是不支持 JSONP 的，但可以通过配置实现。例如，在请求中添加“jsonp”参数： ```javascript axios.get('http://api.example.com/data', { params: { callback: 'jsonCallback', dataType: 'jsonp' } }) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); ``` 通过以上方法，可以解决 vue.js 中 axios 跨域访问错误问题。根据具体情况选择合适的解决方法，以确保跨域请求能够正常进行。 ### 回答2： Vue.js中使用axios请求数据时，常常会遇到跨域访问错误。这是因为浏览器的同源策略限制了不同域名之间的访问。 解决这个问题的方法有几种： 1. 使用代理 可以在项目的配置文件（vue.config.js或者nuxt.config.js）中配置代理。通过将请求代理到同域名下的接口，实现跨域访问。 例如，可以在配置文件中添加如下代码： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://api.example.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 然后，在axios的请求中使用相对路径（不包含域名）进行访问。例如： ```javascript axios.get('/api/data') .then(response => { console.log(response.data) }) ``` 这样就可以跨域访问目标接口了。 2. 设置服务器响应头 在目标服务器上，设置允许跨域访问的响应头。一般来说，可以在后端的接口代码中添加以下响应头： ```javascript app.use(function(req, res, next) { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); next(); }); ``` 这样浏览器就会允许跨域访问该接口了。 3. JSONP JSONP是一种前端跨域访问的解决方案。通过在请求中添加一个回调函数作为参数，服务器将返回该函数的调用，并将数据作为参数传递给该函数。 例如，在axios请求中使用JSONP： ```javascript axios.jsonp('http://api.example.com/data?callback=handleData') .then(response => { console.log(response.data) }) ``` 然后，在全局定义一个处理返回数据的函数： ```javascript function handleData(data) { console.log(data) } ``` 这样就可以通过JSONP实现跨域访问了。 以上是几种解决Vue.js中axios跨域访问错误的方法，可以根据具体情况选择使用。 ### 回答3： 在Vue.js中，由于浏览器的同源策略，如果我们的Vue应用与后端接口的域名或端口不一致，会出现跨域访问错误。然而，我们可以使用axios库来解决这个问题。 首先，为了解决跨域访问错误，我们可以在后端的API接口中添加响应头Access-Control-Allow-Origin: *，允许所有来源的请求访问接口。当然，我们也可以根据需求设置特定的源或域名。 另外，我们还可以通过设置代理来解决跨域访问问题。在项目的根目录下的`vue.config.js`文件中，我们可以使用`devServer`配置项来设置代理。例如，我们可以将/api路径下的请求代理到http://localhost:8000路径下，具体配置如下： ``` module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8000', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 以上配置意味着，当我们的Vue应用发起/api路径下的请求时，它将被代理到http://localhost:8000路径下。`changeOrigin`选项设置为true时，请求头中的host会被设置为目标url，同时`pathRewrite`选项可以重写请求路径，删除/api前缀。 在前端代码中，我们可以使用axios来发起跨域请求。例如，我们可以在Vue的组件中使用axios来请求后端接口： ``` import axios from 'axios' export default { methods: { fetchData() { axios.get('/api/data') .then(response => { // 处理响应数据 }) .catch(error => { // 处理错误 }) } } } ``` 通过以上方法，我们可以解决Vue.js中axios跨域访问错误问题，实现与后端接口的跨域通信。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值