vue 使用axios 出现跨域请求的两种解决方法
最近在使用vue axios发送请求,结果出现跨域问题,网上查了好多,发现有好几种结局方案。
1:服务器端设置跨域
header(“Access-Control-Allow-Origin:*”);
header(“Access-Control-Allow-Headers:content-type”);
header(“Access-Control-Request-Method:GET,POST”);
2:可以自己设置一个代理服务器,使用proxyTable 我比较推荐这种方法。
首先在config/index.js 里面找到proxyTable :{} ,然后在里面加入
"/api":{
target: 'http://47.104.218.122:8087',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
注意这里面 /api是你自定义的,写成什么都可以。target 设置你调用的接口域名和端口号。这里理解成用‘^/api’代替target里面的地址,后面组件中我们调接口时直接用api代替 。比如我要调用’http://47.104.218.122:8087/dictionaryType‘,直接写‘/api/dictionaryType’即可。
然后我们可以在main.js设置一个基础路径,这样你调用接口的时候可以不写api,直接写/接口名称即可。在main.js 设置 axios.defaults.baseURL = ”/api”;
然后掉接口的时候可以直接写let _url4 = ”/dictionaryTypes”;这样就比较省事。
this.$axios.get(_url4)
.then(response=>{
alert(response);
alert();
})
.catch(error=>{
console.log(error);
})
vue 使用axios 出现跨域请求的两种解决方法的更多相关文章
- Javascript跨域请求的几种解决方法
什么情况下才会出现跨域? 假设域名是:http://www.example.com.cn/ 如果所请求的域名跟这个域名不致,这种情况就是跨域,由于跨域存在漏洞,所以一般来说正常的跨域请求方式是请求不到 ...
- Ajax跨域问题的两种解决方法
浏览器不允许Ajax跨站请求,所以存在Ajax跨域问题,目前主要有两种办法解决. 1.在请求页面上使用Access-Control-Allow-Origin标头. 使用如下标头可以接受全部网站请求: ...
- Springboot中关于跨域问题的一种解决方法
前后端分离开发中,跨域问题是很常见的一种问题.本文主要是解决 springboot 项目跨域访问的一种方法,其他 javaweb 项目也可参考. 1.首先要了解什么是跨域 由于前后端分离开发中前端页面 ...
- [1.6W字]浏览器跨域请求的原理, 以及解决方法(可以纯前端实现) #flight.Archives011
Title/ 浏览器跨域(CrossOrigin)请求的原理, 以及解决方案详细指南 #flight.Archives011 序: 最近看到又有一波新的创作活动了, 官方给出的话题中有一个" ...
- PHP允许AJAX跨域请求的两种方法
* 一. 服务端设置 header 头允许AJAX跨域 ** 代码如下: // 允许 ityangs.net 发起的跨域请求 header("Access-Control-Allow-Ori ...
- ASP.NET MVC 实现AJAX跨域请求的两种方法
通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据的加载,例如Google. 在ASP.NET MVC 框 ...
- ajax跨子域请求的两种现代方法
因为面向互联网的性质,我们公司的大部分系统都采用多子域的方式进行开发和部署,以达到松耦合和分布式的目的,因此子系统间的交互不可避免.虽然通过后台的rpc框架解决了大部分的交互问题,但有些情况下,前端直 ...
- nginx/ajax跨子域请求的两种现代方法以及403解决
因为面向互联网的性质,我们公司的大部分系统都采用多子域的方式进行开发和部署,以达到松耦合和分布式的目的,因此子系统间的交互不可避免.虽然通过后台的rpc框架解决了大部分的交互问题,但有些情况下,前端直 ...
- vue.js学习之 跨域请求代理与axios传参
vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...
随机推荐
- C# WPF集中引用图片等资源的路劲方式
第一内部资源: pack://application:,,,/images/my.jpg 第二 外部程序资源: pack://SiteOfOrigin:,,,/images/my.jpg 需要将资源放 ...
- jvm之java类加载机制和类加载器(ClassLoader),方法区结构,堆中实例对象结构的详解
一.类加载或类初始化:当程序主动使用某个类时,如果该类还未被加载到内存中,则JVM会通过加载.连接.初始化3个步骤来对该类进行初始化.如果没有意外,JVM将会连续完成3个步骤. 二.类加载时机: 1 ...
- PHP敏感词替换
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- Winfrom 极简版贪吃蛇源码
该源码是我在百度知识库借助前辈的的经验,加上自己的一点小改动写的一个非常简陋的贪吃蛇小程序.如果你们有更好的改动方案,欢迎评论. 进入主题吧! 1.创建一个桌面应运程序,拖一个定时器控件.这样,程序界 ...
- 宝塔控制面板+wordpress搭建个人网站
上个月买了服务器和域名之后就搁置了,今天有空闲就来配合教程尝试一下搭建个人网站,下面是网站搭建的详细过程以及中间的一些细节问题,写这篇文章的目的就是希望能够帮到一些小伙伴,或者为以后搭建网站做一些参考 ...
- Android-分享多图到微信好友
/** * 微信分享(多图片) */ private static void shareWeChatByImgList(String kDescription, List<File> im ...
- Phoenix中的timestamp字段查询以及timestamp的比较查询
1 查询语法 SELECT TO_CHAR(createtime, 'yyyy-MM-dd HH:mm:ss') FROM USER 2 需要比较timestamp的语法查询 select * fro ...
- celery:强大的定时任务模块
什么是celery 还是一个老生常谈的话题,假设用户注册,首先注册信息入库,然后要调用验证码服务接口,然后根据手机号发送验证码,最后再返回响应给浏览器.但显然调用接口.发送验证码之后成功再给浏览器响应 ...
- VS2012中--查找定义后从未被使用的函数
操作步骤如下: 选择项目==>右键属性==>代码分析(选择Microsoft的所有规则) 注:默认为 托管建议规则 注:CA1804 CA1811规则 例如需要查看某个项目从未被使用的函数 ...
- API开发之接口安全(一)----生成sign
在对于API的开发中 最让人头疼的 就是接口数据暴露 让一些有心之人 抓包之后恶意请求 那么如何解决这一弊端呢?自然而然的 我们就想到了 加密 那我们又如何加密 如何解密 才能使之有最安全的效率呢? ...