[转]vue跨域解决方法
vue跨域解决方法
vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 这种跨域错误。
要想本地正常的调试,解决的办法有三个:
一、后台更改header
1
2
|
header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 |
这样就可以跨域请求数据了。
二、使用JQuery提供的jsonp (注:vue中引入jquery,自行百度)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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脚手架搭建)
例如请求的url:“http://f.apiplus.cn/bj11x5.json”
1、打开config/index.js,在proxyTable中添写如下代码:
1
2
3
4
5
6
7
8
9
|
proxyTable: { '/api': { //使用"/api"来代替"http://f.apiplus.c" target: 'http://f.apiplus.cn', //源地址 changeOrigin: true, //改变源 pathRewrite: { '^/api': 'http://f.apiplus.cn' //路径重写 } } } |
2、使用axios请求数据时直接使用“/api”:
通过这中方法去解决跨域,打包部署时还按这种方法会出问题。解决方法如下:
[转]vue跨域解决方法的更多相关文章
- vue跨域解决方法 及设置api路径方法
vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is prese ...
- vue跨域解决方法
针对不在同一服务器,很可能出现跨域问题,解决方法 注意:修改了配置文件,需要重启才能生效
- JavaScript跨域解决方法大全
跨域的定义:JavaScript出于安全性考虑,同源策略机制对跨域访问做了限制.域仅仅是通过“URL的首部”字符串进行识别,“URL的首部”指window.location.protocol +win ...
- vue+axios跨域解决方法
通过这种方法也可以解决跨域的问题. 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) 例如请求的url:“http://f.apiplus.cn/bj11x ...
- ajax原理和跨域解决方法
ajax是异步的 JavaScript 和 XML.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 1--启动 ...
- WCF跨域解决方法及一些零碎的东西。
之前发过一篇随笔,说的WCF配置文件配置问题.里面也配了跨域支持,但是jsoncollback只支持Get请求,Post请求是解决不了,所以这里把真正的WCF跨域问题贴出来. 话不多说,直接帖配置文件 ...
- cookie 跨域解决方法
1.Nginx 正向和反向代理的区别 正向代理和反向代理的区别:正向代理隐藏真实客户端,反向代理隐藏真实服务端,图示: 2.cookie跨域问题 因为cookie存在跨域问题,其中一个解决方法是,设置 ...
- ajax 跨域解决方法
最近在开发过程中,使用ajax去异步调取图片.在开发中这个功能没什么问题,可以后来提测,重新部署之后就有问题了,这就是ajax的跨域问题. ajax核心对象XMLHttpRequest本身是不支持跨域 ...
- [跨域]跨域解决方法之Ngnix反向代理
跨域原理:http://www.cnblogs.com/Alear/p/8758331.html 介绍Ngnix之前,我么先来介绍下代理是什么~ 代理相当于中间人,中介的概念 代理分为正向代理和反向代 ...
随机推荐
- flutter 底部按钮切换页面
界面如图: 我们就从上节里面的app.dartt修改 目录:lib lib/story 其它两个目录一样. 图片配置一下 app.dart import 'package:flutter/materi ...
- jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等
简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...
- 正确的学python方式
首先呢,和其他的各种学习都一样,你一定要明白你学习的目标是什么.有的人想要通过学习Python,转行成程序员,实现行业上的转变:有的人希望通过学习Python,在现有的岗位上提升自己:当然也有很多人只 ...
- 关于ueditor插入不了动态地图
1. 打开编辑器根目录下面的ueditor.all.js文件,找到: table.setAttribute("data-sort", cmd == "enablesort ...
- PLSQL安装教程,无需oracle客户端(解决本地需要安装oracle客户端的烦恼)
最近用笔记本开发,项目用的是Oracle数据库,不想本地安装Oracle客户端. 就只装了一个PLSQL 连接数据库的时候各种错误,现在解决了记录一下. 详细内容见 附件
- Anatomy of a Database System学习笔记 - 查询
查询解析 解析会生成一个查询的内部展示.格式检查包含在解析过程中. 每次解析一个SELECT,步骤如下:1. 从FROM里找到表名,转换成schema.tablename.这一步需要调用目录管理器ca ...
- 第五篇、Python之迭代器与生成器
1.迭代和递归等概念 循环(loop):指的是在满足条件的情况下,重复执行同一段代码.比如,while语句,for循环. 迭代(iterate):指的是按照某种顺序逐个访问列表中的每一项.比如,for ...
- python框架django-web层
1.demo 命令行:django-admin startproject HelloWorld 命令执行成功后会根据模版生产一个django项目 然后通过 命令:python3 manage.py r ...
- mac 环境搭建
安装homebrew jdk 也可以官网下载 maven 官网下载tar.gz包 也在homebrew下安装git,java,mysql.
- CS通用项目系统搭建——三层架构第二天 (补一篇完整的SqlHelper)
#region ExecuteNonQuery(如果是增,删,修) /// <summary> /// 执行sql命令 /// </summary> /// <param ...