当拿到一个网址如:https://music.163.com/store/api/categorypage/list  获取数据是出现如下:

证明该网址不能非常直观的拿到数据。接下来我们试试跨域拿这个网址的数据:

1、首先在 src 文件里我们需要配置(创建)一个 vue.config.js 文件

2、在自己的 request 文件夹 (专门用来请求数据的文件) 里:

  - 通过如下可跨域提示定义方法

  - 然后 export 导出

3、main.js里引入 request 文件:import ajax from ‘@/request’  将ajax挂载到全局

4、app引用

打印结果:

  - 刚开始调用: noCrossDomain  方法没有拿到数据

  - 第二次用:isCrossDomain  方法拿到了数据。说明此跨域可行

(!!!配置完成需要重新运行,不然也不起作用)

(!!!配置完成需要重新运行,不然也不起作用)

菜鸟一枚。若有不足,请指出。

Vue 中 axios 跨域配置 (!!!配置完成需要重新运行,不然也不起作用)的更多相关文章

  1. Vue用axios跨域访问数据

    Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...

  2. $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)

    1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...

  3. vue脚手架解决跨域问题-------配置反向代理

    1.打开config/index.js 2.在dev配置对象中找到proxyTable:{} 3.添加如下配置 // 配置反向代理,解决跨域请求 proxyTable: { '/api': { tar ...

  4. 关于vue项目中axios跨域的解决方法(开发环境)

    1.在config文件中修改index.js proxyTable: { "/api":{ target: 'https://www.baidu.com/muc/',//你需要跨域 ...

  5. 【原创】Vue.js 中 axios 跨域访问错误

    1.假如访问的接口地址为 http://www.test.com/apis/index.php  (php api 接口) 2.而开发地址为http://127.0.0.1:8080,当axios发起 ...

  6. vue中的跨域问题

    https://segmentfault.com/a/1190000011072725(原文)   使用vue-axios和vue-resource解决vue中调用网易云接口跨域的问题 注(api很重 ...

  7. vue 使用axios 跨域请求数据的问题

    axios默认是没有jsonp 跨域请求的方法的.一般来说流行的做法是将跨域放在后台来解决,也就是后台开发人员添加跨域头信息. 例如java中的 header,response.setHeader(& ...

  8. vue 解决axios 跨域问题

    闲着没事,假期敲vue 请求数据,总结下vue跨越问题 第一种.服务器服务器不支持跨域请求   1.当跨域无法请求的时候我们可以修改工程下config文件夹下的index.js中的dev:{}部分. ...

  9. vue中解决跨域问题

    方法1.后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Metho ...

随机推荐

  1. (数据科学学习手札135)tenacity:Python中最强大的错误重试库

    本文示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 我们在编写程序尤其是与网络请求相关的程序, ...

  2. 七天接手react项目 系列 —— 尾篇(antd 和 mobx)

    其他章节请看: 七天接手react项目 系列 尾篇 前面我们依次学习了 react 基础知识.react 脚手架创建项目.react 路由,已经花费了不少时间,但距离接手 spug_web 项目还有一 ...

  3. Java基础 (下)

    泛型 Java 泛型了解么?什么是类型擦除?介绍一下常用的通配符? Java 泛型(generics) 是 JDK 5 中引入的一个新特性, 泛型提供了编译时类型安全检测机制,该机制允许程序员在编译时 ...

  4. 什么是原子操作?在 Java Concurrency API 中有哪些原 子类(atomic classes)?

    原子操作(atomic operation)意为"不可被中断的一个或一系列操作" . 处理器使用基于对缓存加锁或总线加锁的方式来实现多处理器之间的原子操作. 在 Java 中可以通 ...

  5. 租户的概念和MybatisPlus实现

    租户的概念:https://baijiahao.baidu.com/s?id=1625945681925384464&wfr=spider&for=pc MybatisPlus框架的租 ...

  6. 你如何确保 main()方法所在的线程是 Java 程序最后结束 的线程?

    我们可以使用 Thread 类的 join()方法来确保所有程序创建的线程在 main()方法退出前结束.

  7. django中动态新建postgres数据库表

    import psycopg2def create_new_table(table_id): conn = psycopg2.connect(database='Test', user='postgr ...

  8. 转:C++11常用新特性快速一览

    转载至:https://blog.csdn.net/jiange_zh/article/details/79356417 1.nullptr nullptr 出现的目的是为了替代 NULL. 在某种意 ...

  9. spring DAO 有什么用?

    Spring DAO 使得 JDBC,Hibernate 或 JDO 这样的数据访问技术更容易以一 种统一的方式工作.这使得用户容易在持久性技术之间切换.它还允许您在编写 代码时,无需考虑捕获每种技术 ...

  10. 速看,ElasticSearch如何处理空值

    大家好,我是咔咔 不期速成,日拱一卒 在MySQL中,十分不建议大家给表的默认值设置为Null,这个后期咔咔也会单独出一期文章来说明这个事情. 但你进入一家新公司之前的业务中存在大量的字段默认值为Nu ...