最近在使用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 出现跨域请求的两种解决方法的更多相关文章

  1. Javascript跨域请求的几种解决方法

    什么情况下才会出现跨域? 假设域名是:http://www.example.com.cn/ 如果所请求的域名跟这个域名不致,这种情况就是跨域,由于跨域存在漏洞,所以一般来说正常的跨域请求方式是请求不到 ...

  2. Ajax跨域问题的两种解决方法

    浏览器不允许Ajax跨站请求,所以存在Ajax跨域问题,目前主要有两种办法解决. 1.在请求页面上使用Access-Control-Allow-Origin标头. 使用如下标头可以接受全部网站请求: ...

  3. Springboot中关于跨域问题的一种解决方法

    前后端分离开发中,跨域问题是很常见的一种问题.本文主要是解决 springboot 项目跨域访问的一种方法,其他 javaweb 项目也可参考. 1.首先要了解什么是跨域 由于前后端分离开发中前端页面 ...

  4. [1.6W字]浏览器跨域请求的原理, 以及解决方法(可以纯前端实现) #flight.Archives011

    Title/ 浏览器跨域(CrossOrigin)请求的原理, 以及解决方案详细指南 #flight.Archives011 序: 最近看到又有一波新的创作活动了, 官方给出的话题中有一个" ...

  5. PHP允许AJAX跨域请求的两种方法

    * 一. 服务端设置 header 头允许AJAX跨域 ** 代码如下: // 允许 ityangs.net 发起的跨域请求 header("Access-Control-Allow-Ori ...

  6. ASP.NET MVC 实现AJAX跨域请求的两种方法

    通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据的加载,例如Google. 在ASP.NET MVC 框 ...

  7. ajax跨子域请求的两种现代方法

    因为面向互联网的性质,我们公司的大部分系统都采用多子域的方式进行开发和部署,以达到松耦合和分布式的目的,因此子系统间的交互不可避免.虽然通过后台的rpc框架解决了大部分的交互问题,但有些情况下,前端直 ...

  8. nginx/ajax跨子域请求的两种现代方法以及403解决

    因为面向互联网的性质,我们公司的大部分系统都采用多子域的方式进行开发和部署,以达到松耦合和分布式的目的,因此子系统间的交互不可避免.虽然通过后台的rpc框架解决了大部分的交互问题,但有些情况下,前端直 ...

  9. vue.js学习之 跨域请求代理与axios传参

    vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...

随机推荐

  1. Vue学习笔记(一) 利用idea 搭建 vue 项目

    环境准备工作: 安装node.js 环境  -- 略 安装vue-li  全局安装vue-cli,在命令行中执行npm install -g vue-cli idea准备工作: 安装vue.js Fi ...

  2. Line 算法与deepwalk的对比 和个人理解

    用户的关注关系本身就是一个图结构,要从用户关注关系生成用户的embedding表示,其实就是做graph的emebding表示. deepwalk+word2vec 比较简单,效果也还可以.这种方法再 ...

  3. fastadmin 金额 字段类型及html验证

    金额 字段类型  整数  小数 decimal    10      2 float          10     2 html验证 <div class="form-group&q ...

  4. mysql数据库:分表、多表关联、外键约束、级联操作

    一.分表.外键.级联.多对一 二.多对多 三.一对一 一.分表.外键.级联.多对一 将部门数据与员工数据放到同一张表中会造成 数据重复 结构混乱 扩展维护性差 需要分表 create table de ...

  5. python函数:函数阶段练习

    1.写函数,用户传入修改的文件名,与要修改的内容,执行函数,完成批了修改的操作def modify_file(filename,old,new): import os with open(filena ...

  6. 网桥 交换机 VLAN 等基本概念---以太网

    交换机: 集线器: 基带信号:基带信号就是幅度只有两种离散值的数字信号. 基带传输:用基带信号实现数据传输的方式. 曼彻斯特编码 帧对界和MAC帧 后退算法 和 捕获效应 冲突域 最短帧长 网桥 网桥 ...

  7. 检测udp端口

    linux 检测端口是否打开:nc -zuv ip 端口 服务器监听端口:nc -l -u ip 端口(可以发送和接受信息) 客户端检测端口:nc -u ip 端口(可以发送和接受信息) 查看监听的t ...

  8. Beta冲刺版本第二天

    该作业所属课程:https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2 作业要求地址:https://edu.cnblogs.com ...

  9. Tarjan无向图的割点和桥(割边)全网详解&算法笔记&通俗易懂

    更好的阅读体验&惊喜&原文链接 感谢@yxc的腿部挂件 大佬,指出本文不够严谨的地方,万分感谢! Tarjan无向图的割点和桥(割边) 导言 在掌握这个算法前,咱们有几个先决条件. [ ...

  10. 二进制;16进制; Byte , Python的bytes类; Base64数据编码; Bae64模块;

    参考:中文维基 二进制 位操作(wiki) Byte字节 互联网数据处理:Base64数据编码 Python的模块Base64 16进制简介 python: bytes对象 字符集介绍:ascii 二 ...