vue实现跨域的方法分析
本文实例讲述了vue实现跨域的方法。分享给大家供大家参考,具体如下:
在请求的资源上没有“访问控制允许源”标头。因此,“http://LoalHoal:8081”是不允许访问的。
出现这个报错就说明,浏览器限制了跨域,需要设置跨域
一、后台更改header
header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
二、使用JQuery提供的jsonp需要vue中引入jquery,不是今天讲的重点
methods: { getData () { var that = this $.ajax({ url: 'yoururl', type: 'GET', dataType: 'JSONP', success: function (res) { that.data = res.data; } }) } }
三、使用vue-cli脚手架搭建项目时候的proxyTable解决跨域
在config目录下的index.js的proxyTable配置:
第一种:
proxyTable: { '/api': { //使用"/api"来代替"http://v.juhe.cn/toutiao/index" target: 'http://v.juhe.cn/toutiao/index', //源地址 changeOrigin: true, //改变源 pathRewrite: { '^/api': '' //路径重写 } } },
this.axios.post("/api?type=keji&key=yourkey").then(res => { console.log("api:"+res); this.kjnews = res.data.result.data; });
注意:路径重写后面是空的不然请求不成功,最后配置完之后还要npm run dev
重启一下
希望本文所述对大家vue.js程序设计有所帮助。
相关推荐
-
vue.js使用代理和使用Nginx来解决跨域的问题
使用Nginx 反向代理解决跨域问题(vue.js使用代理去掉vue.js因为跨域而触发的options请求) 我们的项目还是需要node.js作为容器的 一.Windows 下安装Nginx (官网下载稳定版http://nginx.org/en/download.html) 二.修改config里的nginx.conf文件的server server { listen 8899;// 你的端口 server_name localhost; root C:/ZOBSF_F/dist;//你打包
-
详解vue-cli本地环境API代理设置和解决跨域
前言 我们在使用vue-cli启动项目的时候npm run dev便可以启动我们的项目了,通常我们的请求地址是以localhost:8080来请求接口数据的,localhost是没有办法设置cookie的. 我们可以在vue-cli配置文件里面设置一个代理,跨域的方法有很多,通常需要后台来进行配置.我们可以直接通过node.js代理服务器来实现跨域请求. vue proxyTable接口跨域请求调试 在vue-cli项目中的config文件夹下的index.js配置文件中,dev长这样子: de
-
VUE axios发送跨域请求需要注意的问题
在实际项目中前端使用到vue,后端使用php进行开发.前端使用axios请求请求 关于跨域 跨域的概念这些就不说了,百度一大堆相关的资料信息.我就只在这里记录下我在使用当中遇到的问题,以纪念在逝去的几个小时中资料查找的艰辛. 不多说,直接上代码~~~~ 同理,跨域的解决方案为cros.服务器 PHP端代码如下(laravel 中间件进行处理): public function handle($request, Closure $next) { if ($request->isMethod('OP
-
Vue Ajax跨域请求实例详解
一.设置config/index.js || proxyTable添加 proxyTable: { '/api': { target: 'http://192.168.48.239:8080/ydzl', changeOrigin: true, pathRewrite: { '^/api': '' } } 二.mian.js 添加vue全局属性 Vue.prototype.HOST = '/api' 三.如果是post的话 1.修改数据格式 transformRequest: [function
-
详解在Vue中如何使用axios跨域访问数据
最近在项目中需要用到axios,所以就恶补一下这个axios到底是什么东东.越来它是vue-resource的替代品,官网也说了,以后都用axios, vue-resource不在维护.那么这个axios怎么用呢,上网搜索了一大堆,基本上都是雷同,我也不知道那些作者有没有在本地测试过.至少我按照网上的做法,总不能成功.经过几天的奋斗,我终于把它搞清楚了,为了不让其他的小伙伴们走弯路,我把我在实际操作中的例子分享给大家,希望对大家有用. 一.安装axios 老规矩,要想使用axios,我们得安装它
-
详解VueJs前后端分离跨域问题
使用vue-cli搭建的vue项目 可以使用在项目内设置代理(proxyTable)的方式来解决跨域问题 设置配置项的目录在config下的index.js,主要通过配置proxyTable项,设置代理指向你的后台地址 dev: { env: require('./dev.env'), port: 8085, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/ag
-
详解Vue-cli代理解决跨域问题
使用vue-cli调接口的时候,总是会出现垮与问题,因为vue的localhost与访问域名不一致导致.而这一点,开发者显然也想到了,故而在vuejs-templates,也就是vue-cli的使用的模板插件里,有关于API proxy的说明,这个配置就是将localhost映射成访问的域名. 那么何为代理? 代理服务器英文全称是Proxy Server,其功能就是代理网络用户去取得网络信息.形象的说:它是网络信息的中转站.可以简单粗暴理解为把你的域名转换成你访问的域名,(我这么记的,当然可能并
-
vue代理和跨域问题的解决
一.安装vue-resource插件 cnpm install vue-resource --save 在根目录下的package.json检查一下插件的版本 在rourer-index.js下引入文件 import Resource from 'vue-resource' Vue.use(Resource) 引入vue-resource后,可以基于全局的Vue对象使用http,也可以基于某个Vue实例使用http 参考链接 二.安装axios插件 cnpm install --save axi
-
Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述 前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The valu
-
详解Vuejs2.0之异步跨域请求
Vuejs由1.0更新到了2.0版本.HTTP请求官方也从推荐使用Vue-Resoure变为了axios.接下来我们来简单地用axios进行一下异步请求.(阅读本文作者默认读者具有使用npm命令的能力,以及具备ES6的能力,以及等等...) 首先我们来安装Vue-Cli开发模板(这个模板可以快速生成vuejs的运行配置环境,可以使新手快速免除配置搭建出运行界面),这里我使用cnpm命令,请自行百度配置. 打开命令窗口: cnpm install -g vue-cli 等待片刻,即可安装完毕. 然
随机推荐
- Further Study of Rugular Expresions第1/2页
- DBA_2PC_PENDING 介绍
- javascript 通用loading动画效果实例代码
- PHP中对各种加密算法、Hash算法的速度测试对比代码
- php下使用以下代码连接并测试
- PHP4在WinXP下IIS和Apache2服务器上的安装实例
- Python六大开源框架对比
- ASP基础入门第八篇(ASP内建对象Application和Session)
- MySQL数据库下用户及用户权限配置
- php+jQuery+Ajax实现点赞效果的方法(附源码下载)
- PHP 执行系统外部命令 system() exec() passthru()
- 标准的js无缝滚动效果
- C#文件合并的方法
- 基于SpringBoot实现图片上传与显示
- intellij idea tomcat热部署配置教程
- python实现图片九宫格分割
- react的滑动图片验证码组件的示例代码
- tensorflow生成多个tfrecord文件实例
- 浅析Go 字符串指纹
- vue在图片上传的时候压缩图片