首先:

config/index.js下面的proxyTable配置您的服务访问基本地址,将changeOrigin设置为true即可,然后在你需要访问接口的地方,这样使用,以下是我的工程代码(前提是你已经安装了vue-resource,安装方式是:

vue-resource 导入 
还有elementui导入方法都是一样 这里就以vue-resource为例

npm installvue-resource --save

之后在需要导入的js中import还有use

import VueResource from 'vue-resource'
Vue.use(VueResource)

// config/index.js module.exports = { // ... dev: { proxyTable: { // proxy all requests starting with /api to jsonplaceholder '/api': { target: 'http://jsonplaceholder.typicode.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } }
}

/* eslint-disable */
<template>
<div class="hello" style="background: fuchsia">
<h1>您登陆{{ msg }}</h1>
<button v-on:click="showDetails">获取20服务器上接收所信息</button>
</div> </template> <script>
export default {
name: 'hello',
data () {
return {
msg: ''
}
},
methods: {
showDetails: function () {
this.$http.post('api/RMSClient/useradmin/login?password=d90b21c4a61992ff330bade33e84633d&userName=444').then(function (res) {
console.log(res) // 返回很多的数据,比如执行状态,url,data等等
console.log(res.data)// 返回的json数据
console.log(res.data.message)// json对象里面的信息
this.msg = res.data.message
})
}
}
}
</script>

vuejs 解决跨域访问问题的更多相关文章

  1. springboot 前后端分离开发解决跨域访问

    最近新学习了Java EE开发框架springboot,我在使用springboot前后台分离开发的过程中遇到了跨域求问题.在网上寻找答案的过程中发现网上的解决方案大多比较零散,我在这里整理一个解决方 ...

  2. 用jQuery与JSONP轻松解决跨域访问的问题【转】

    原文地址:http://www.jb51.net/article/46463.htm 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅 ...

  3. Axiso解决跨域访问(...XMLHttpRequest cannot load http://xxx.xxx No 'Access-Control-Allow-Origin'...)

    直接访问如下:this.$axios.get("http://localhost:8089/yc/demo").then(res=>{    console.log(res) ...

  4. Axiso解决跨域访问

    问题: 在项目中需要需要讲本地项目去请求一个URL接口获取数据 例如: 本地请求地址:http://127.0.0.1:19323/site/info.json 请求Url地址:http://www. ...

  5. 用jQuery与JSONP轻松解决跨域访问的问题

    浏览器端的真正跨域访问,推荐的是目前jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的. var qsData = {'searchWord':$("# ...

  6. C# 和Jsonp的一个小demo 用jQuery与JSONP轻松解决跨域访问的问题

    客服端:      在A项目下面 建立一个 JsonpClient.aspx页面,代码如下: <%@ Page Language="C#" AutoEventWireup=& ...

  7. spring boot 解决跨域访问

    package com.newings.disaster.shelters.configuration; import org.springframework.context.annotation.B ...

  8. CORS解决跨域访问问题

    简言之,CORS就是为了让AJAX可以实现可控的跨域访问而生的. Tomcat下的配置   下载cors-filter-1.7.jar,java-property-utils-1.9.jar  [下载 ...

  9. 深入了解jsonp解决跨域访问

    在这个项目中,我们做的充分利用jsonp这是一个特点跨界,完成简单的单点登录认证和权限控制的统一.道,各有各的优点.各有各的优点,选择什么方式实现全然取决于我们自己或者项目经理的开发经验,对各种框架的 ...

随机推荐

  1. Android 最新 Support V4 包大拆分有用吗?

    Google 更新了最新的 Support Library 版本,其中最为显眼的功能莫过于 support-v4 大拆分,然后这个拆分现在看来并没有那么美好. v4 包从 2011 年开始引入,包含 ...

  2. 旋转数组的最小数字(C++ 和 Python 实现)

    (说明:本博客中的题目.题目详细说明及参考代码均摘自 “何海涛<剑指Offer:名企面试官精讲典型编程题>2012年”) 题目 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的 ...

  3. Android错题集

    在Android学习的过程中,遇到过很多迷之问题,在这里记下以防以后忘记,也可以顺便帮助一下遇到了相同问题的朋友. 1.自定义控件文字大小错误: 在自定义控件中获取的getDimension值为px值 ...

  4. Php 性能参数优化 及 Iptables 防火墙限制用户访问平率

    Php-Fpm.Conf 文件配置优化 [global] pid = run/php-fpm.pid process_control_timeout=5 [www] listen.allowed_cl ...

  5. Centos如何通过yum安装php7

      执行如下命令安装epel yum -y install epel-release   更换rpm源,请根据自己的centos版本选择相应的rpm源进行安装 Centos 5.X: rpm -Uvh ...

  6. CountDownLatch的简单使用

    from https://www.jianshu.com/p/cef6243cdfd9 1.CountDownLatch是什么? CountDownLatch是一个同步工具类,它允许一个或多个线程一直 ...

  7. June 25th 2017 Week 26th Sunday

    There is always that one song that brings back old memories. 总有那么一首歌,让你想起那些旧的回忆. There are seveal so ...

  8. June 21st 2017 Week 25th Wednesday

    Discontent is the first step in progress. 不知足是前进中的第一步. Several days ago, I wrote down a quote which ...

  9. NET平台微服务

    .NET平台微服务项目汇集   最近博客园出现了一篇文章<微服务时代之2017年五军之战:Net PHP谁先死>,掀起了一波撕逼,作者只是从一个使用者的角度来指点江山,这个姿势是不对的.. ...

  10. mongoDB 创建数据库、删除数据库

    创建数据库 use 命令 MongoDB 用 use + 数据库名称 的方式来创建数据库.use 会创建一个新的数据库,如果该数据库存在,则返回这个数据库. 语法格式 use 语句的基本格式如下: u ...