Vue跨域访问,axios&cors
先安装node.js和npm,这个不用说了,直接在创建vue项目,然后实践一下跨域访问。
如果npm安装较慢,可安装淘宝镜像,执行下面命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install cnpm -g
1.全局安装vue-cli:
npm install -g vue-cli
2.全局安装webpack:
npm install -g webpack
3.初始化项目:
vue init webpack axios_cors(文件名称)
4.切换到项目文件目录下,安装axios:
cd axios_cors
npm install axios
Ps.这里只需要安装axios,microsoft.aspnetcore.cors是服务端支持跨域请求所需要安装的包,npm里并没有这个包
5.跨域访问:
配置代理:config--》index.js
module.exports = {
dev: { // Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/apis': {
target:'http://t.weather.sojson.com/api',//请求域名
//secure: false, // 如果是https接口,需要配置这个参数
changeOrigin:true,//如果是跨域访问,需要配置这个参数
pathRewrite:{
'^/apis': '/'
}
}
},
…………
}
}
HelloWorld.vue中请求代码:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>跨域请求天气</h2>
<ul v-for="item in data" :key="item.id">
<li>{{item}}</li>
</ul>
</div>
</template> <script>
//引入axios
import axios from "axios";
export default {
name: "HelloWorld",
data() {
return {
msg: "请求成功",
data: null
};
},
created() {
//创建实例时设置配置的默认值
const httpHandler = axios.create({
headers: { "Content-Type": "application/json;charset=utf-8" }, //即将被发送的自定义请求头
withCredentials: true //表示跨域请求时是否需要使用凭证
}); let uri = "apis/weather/city/101030100"; httpHandler .get(uri) .then(result => { console.log(result); this.data = result; }) .catch(error => { console.error(error); }); } }; </script>
页面结果:
/****************************我是可爱的分割线********************************/
Vue跨域访问,axios&cors的更多相关文章
- vue跨域访问
第一次创建vue项目,画完静态页面一切顺利,准备和后台进行联调,问题来了,无论怎么调试使用Axios,jQuary还是使用原生的Ajax请求都访问不通(前提条件,另外一个人的电脑当成服务器,进行访问) ...
- 跨域访问之CORS
CORS:定义 2014年1月16日,W3C的Web应用工作组(Web Applications Working Group)和Web应用安全工作组(Web AppSec)联合发布了跨源资源共享(Cr ...
- Web API 跨域访问(CORS)
1.在web.config里把“ <remove name="OPTIONSVerbHandler" /> ”删掉. 2. 到nuget上装一个包: ht ...
- SpringBoot 实现前后端分离的跨域访问(CORS)
序言:跨域资源共享向来都是热门的需求,使用CORS可以帮助我们快速实现跨域访问,只需在服务端进行授权即可,无需在前端添加额外设置,比传统的JSONP跨域更安全和便捷. 一.基本介绍 简单来说,CORS ...
- 第20章—跨域访问(CORS)
spring boot 系列学习记录:http://www.cnblogs.com/jinxiaohang/p/8111057.html 码云源码地址:https://gitee.com/jinxia ...
- .net core webapi+vue 跨域访问
最近在做一个前后端分离的示例,以下代码完美解决跨域的问题 一.后端服务 1.首先我们建一个.net core webapi的项目 2.项目引用Microsoft.AspNetCore.Cors 包 3 ...
- ASP.NET Web API 跨域访问(CORS)
一.客户端用JSONP请求数据 如果你想用JSONP来获得跨域的数据,WebAPI本身是不支持javascript的callback的,它返回的JSON是这样的: {"YourSignatu ...
- 跨域访问技术CORS(Cross-Origin Resource Sharing)简介
为什么要用CORS? CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttp ...
- 跨域访问JSONP CORS
一.JSONP 常用的Jquery框架支持jsonp方式请求,该方式只支持GET方法,传参大小有限,而且需要后台根据jsonp的请求方式进行封装结果返回. 其中参数jsonp默认为callback,j ...
随机推荐
- 【转载】文件上传Expected MultipartHttpServletRequest: is a MultipartResolver错误解决
引入包commons-fileupload-*.jar,版本号可以根据项目情况调整: 在spring mvc配置文件中增加配置,文件大小限制可根据项目情况调整: <!-- 上传文件拦截,设置最大 ...
- G. I love Codeforces
G. I love Codeforces 题目大意:给你n个字符串,以及m个喜欢关系,如果u喜欢v,这时候u会把它的用户名改为 I_love_ 加上v当时的用户名 Examples input 5an ...
- python第十二周:MySql
MySql数据库 MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司.MySQL 是一种关联数据库管理系统,关联数据库将数据保存在不同的表中,而不 ...
- 第二节:web爬虫之lxml解析库
lxml是python的一个解析库,支持HTML和XML的解析,支持XPath解析方式,而且解析效率非常高.
- hdu2005 第几天?【C++】
第几天? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- 【Codeforces 349B】Color the Fence
[链接] 我是链接,点我呀:) [题意] 让你组成一个只由1~9组成的数字 每个数字需要的paint数字给定. 让你组成一个最大的数字,且所有数字的paint的总和不超过v. [题解] 先求出a中的最 ...
- 洛谷 P3496 [POI2010]GIL-Guilds
P3496 [POI2010]GIL-Guilds 题目描述 King Byteasar faces a serious matter. Two competing trade organisatio ...
- MOS文章翻译
http://blog.csdn.net/column/details/msdnchina.html?&page=1 http://blog.csdn.net/staricqxyz/artic ...
- What you can talk
data buffer who locked the account hash join cost memory and nested loop do not. How to make it hash ...
- Python开发工具安装
v阅读目录 v写在前面 v基本概念 vWindows搭建python开发环境 v从Hello World开始 v博客总结 v博客前言 从大学开始玩python到现在参加工作,已经有5年了,现在的公司是 ...