vue 解决跨域 调试_vue解决跨域问题
vue解决跨域问题
vue跨域解决方法和小总结
vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 这种跨域错误。
要想本地正常的调试,解决的办法有三个:
一、后台更改header
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
这样就可以跨域请求数据了。
二、使用JQuery提供的jsonp (注:vue中引入jquery,自行百度)
methods: {
getData () {
var self = this
$.ajax({
url: 'http://f.apiplus.cn/bj11x5.json',
type: 'GET',
dataType: 'JSONP',
success: function (res) {
self.data = res.data.slice(0, 3)
self.opencode = res.data[0].opencode.split(',')
}
})
}
}
通过这种方法也可以解决跨域的问题。
三、使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建)
1、打开config/index.js,在proxyTable中添写如下代码:
proxyTable: {
'/api': { //使用"/api"来代替"http://f.apiplus.c"
target: 'http://f.apiplus.cn', //源地址
changeOrigin: true, //改变源
pathRewrite: {
'^/api': 'http://f.apiplus.cn' //路径重写
}
}}
2、使用axios请求数据时直接使用“/api”:
getData () {
axios.get('/api/bj11x5.json', function (res) {
console.log(res)
})
通过这中方法去解决跨域,打包部署时还按这种方法会出问题。解决方法如下:
let serverUrl = '/api/' //本地调试时
// let serverUrl = 'http://f.apiplus.cn/' //打包部署上线时
export default {
dataUrl: serverUrl + 'bj11x5.json'
}
调试时定义一个serverUrl来替换我们的“/api”,最后打包时,只需要将“http://www.xxx.com”替换这个“/api”就可以了。
参考资源:https://www.cnblogs.com/wangyongcun/
作者:wangyongcun
vue 解决跨域 调试_vue解决跨域问题相关推荐
- Fiddler跨域调试及Django跨域处理
------·今天距2021年267天·------ 这是ITester软件测试小栈第109次推文 在上一篇Fiddler系列文章:Fiddler设置断点(一),主要介绍了通过Automatic Br ...
- vue 解决跨域 调试_vue+Java后端进行调试时解决跨域问题的方式
今天在开发过程中遇到一个问题,拿到了一套vue代码,计划对这套代码的部分样式进行调整,Java后端代码已经写好并且部署到了线上.这时命令行运行vue项目时访问会受限,取不下数据来,遇到了跨域访问失败的 ...
- vue 解决跨域 调试_Electron-vue解决跨域
Electron-vue解决跨域 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 介绍 在前后端分离开发的时候就会遇到跨域的问题 ...
- vue设置页面滚动高度_vue 解决无法设置滚动位置的问题
问题描述 在实现锚点定位的时候发现无法设置滚动条的位置. 在Vue中,使用 document.body.scrollTop=952 无法设置滚动条的高度. document.body.scrollTo ...
- vue图片动画上下跳动_Vue 解决路由过渡动画抖动问题(实例详解)
前言 Vue-Router 作为 Vue 的核心模块,它为我们提供了基于组件的路由配置.路由参数等功能,让单页面应用变得更易于管理.良好的路由管理尤为重要,比如路由拦截.路由懒加载.路由权限等都在开发 ...
- vue : 本地调试跨域问题的解决办法:proxyTable
vue : 本地调试跨域问题的解决办法:proxyTable 参考文章: (1)vue : 本地调试跨域问题的解决办法:proxyTable (2)https://www.cnblogs.com/fo ...
- vue 引入pdf跨域问题怎么解决_VUE项目中的跨域问题
[摘要]跨域问题是前端开发人员比较常见的问题, 那么跨域出现的原因, 该如何解决跨域, VUE中对跨域又是怎样处理的呢 [作者]田鋆鹏 一. 前端为什么会出现跨域问题? 跨域问题是浏览器同源策略限制, ...
- 通过设置Ionic-Cli代理解决ionic serve跨域调试问题
通过设置Ionic-Cli代理解决ionic serve跨域调试问题 参考文章: (1)通过设置Ionic-Cli代理解决ionic serve跨域调试问题 (2)https://www.cnblog ...
- chrome浏览器解决 跨域调试问题
chrome浏览器解决 跨域调试问题 参考文章: (1)chrome浏览器解决 跨域调试问题 (2)https://www.cnblogs.com/congxueda/p/7053814.html 备 ...
- vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述 前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...
最新文章
- ES6中Generator理解
- 搭建yum源,配置yum源
- C++ 虚基类和抽象类关系
- 适用于Linux / X11的Qt
- wpf表格datagrid拖动列_这才是老板要的Excel表格,你做的太丑了!
- python 字符转义_2500字 字符串专题总结
- 全新Wijmo5中文学习指南正式上线
- 韩顺平 php大牛班课程,2016泰牛程序员韩顺平PHP大牛班HTML课程完整笔记资料.doc...
- 单片机实验13:用热敏电阻和ADC实现测量温度
- 利用python合并关联两个表中的数据
- 希尔贝壳受邀参会IEEE SLT 2021
- qt 使用样式设置渐变色背景
- MoviePy - 中文文档4-MoviePy实战案例-重新构建15世纪舞蹈视频
- css 平移到某个位置_Html基本的动画效果(平移,旋转)
- FPGA学习笔面试记录(二)——FPGA基础
- 冰与火之歌-五王之战(优达数据分析进阶项目)
- CSS实现三角形的原理
- java计算点在圆内外_Java—PTA 点是否在圆内?
- “史上最强”的薪资倒挂!去年的SP offer沦为今年白菜包
- hibernate操作Oracle出现违反唯一约束条件