先安装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的更多相关文章

  1. vue跨域访问

    第一次创建vue项目,画完静态页面一切顺利,准备和后台进行联调,问题来了,无论怎么调试使用Axios,jQuary还是使用原生的Ajax请求都访问不通(前提条件,另外一个人的电脑当成服务器,进行访问) ...

  2. 跨域访问之CORS

    CORS:定义 2014年1月16日,W3C的Web应用工作组(Web Applications Working Group)和Web应用安全工作组(Web AppSec)联合发布了跨源资源共享(Cr ...

  3. Web API 跨域访问(CORS)

    1.在web.config里把“    <remove name="OPTIONSVerbHandler" />  ”删掉. 2. 到nuget上装一个包:    ht ...

  4. SpringBoot 实现前后端分离的跨域访问(CORS)

    序言:跨域资源共享向来都是热门的需求,使用CORS可以帮助我们快速实现跨域访问,只需在服务端进行授权即可,无需在前端添加额外设置,比传统的JSONP跨域更安全和便捷. 一.基本介绍 简单来说,CORS ...

  5. 第20章—跨域访问(CORS)

    spring boot 系列学习记录:http://www.cnblogs.com/jinxiaohang/p/8111057.html 码云源码地址:https://gitee.com/jinxia ...

  6. .net core webapi+vue 跨域访问

    最近在做一个前后端分离的示例,以下代码完美解决跨域的问题 一.后端服务 1.首先我们建一个.net core webapi的项目 2.项目引用Microsoft.AspNetCore.Cors 包 3 ...

  7. ASP.NET Web API 跨域访问(CORS)

    一.客户端用JSONP请求数据 如果你想用JSONP来获得跨域的数据,WebAPI本身是不支持javascript的callback的,它返回的JSON是这样的: {"YourSignatu ...

  8. 跨域访问技术CORS(Cross-Origin Resource Sharing)简介

    为什么要用CORS? CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttp ...

  9. 跨域访问JSONP CORS

    一.JSONP 常用的Jquery框架支持jsonp方式请求,该方式只支持GET方法,传参大小有限,而且需要后台根据jsonp的请求方式进行封装结果返回. 其中参数jsonp默认为callback,j ...

随机推荐

  1. 【转载】文件上传Expected MultipartHttpServletRequest: is a MultipartResolver错误解决

    引入包commons-fileupload-*.jar,版本号可以根据项目情况调整: 在spring mvc配置文件中增加配置,文件大小限制可根据项目情况调整: <!-- 上传文件拦截,设置最大 ...

  2. G. I love Codeforces

    G. I love Codeforces 题目大意:给你n个字符串,以及m个喜欢关系,如果u喜欢v,这时候u会把它的用户名改为 I_love_ 加上v当时的用户名 Examples input 5an ...

  3. python第十二周:MySql

    MySql数据库 MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司.MySQL 是一种关联数据库管理系统,关联数据库将数据保存在不同的表中,而不 ...

  4. 第二节:web爬虫之lxml解析库

    lxml是python的一个解析库,支持HTML和XML的解析,支持XPath解析方式,而且解析效率非常高.

  5. hdu2005 第几天?【C++】

    第几天? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  6. 【Codeforces 349B】Color the Fence

    [链接] 我是链接,点我呀:) [题意] 让你组成一个只由1~9组成的数字 每个数字需要的paint数字给定. 让你组成一个最大的数字,且所有数字的paint的总和不超过v. [题解] 先求出a中的最 ...

  7. 洛谷 P3496 [POI2010]GIL-Guilds

    P3496 [POI2010]GIL-Guilds 题目描述 King Byteasar faces a serious matter. Two competing trade organisatio ...

  8. MOS文章翻译

    http://blog.csdn.net/column/details/msdnchina.html?&page=1 http://blog.csdn.net/staricqxyz/artic ...

  9. What you can talk

    data buffer who locked the account hash join cost memory and nested loop do not. How to make it hash ...

  10. Python开发工具安装

    v阅读目录 v写在前面 v基本概念 vWindows搭建python开发环境 v从Hello World开始 v博客总结 v博客前言 从大学开始玩python到现在参加工作,已经有5年了,现在的公司是 ...