vuejs 解决跨域访问问题
首先:
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 解决跨域访问问题的更多相关文章
- springboot 前后端分离开发解决跨域访问
最近新学习了Java EE开发框架springboot,我在使用springboot前后台分离开发的过程中遇到了跨域求问题.在网上寻找答案的过程中发现网上的解决方案大多比较零散,我在这里整理一个解决方 ...
- 用jQuery与JSONP轻松解决跨域访问的问题【转】
原文地址:http://www.jb51.net/article/46463.htm 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅 ...
- 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) ...
- Axiso解决跨域访问
问题: 在项目中需要需要讲本地项目去请求一个URL接口获取数据 例如: 本地请求地址:http://127.0.0.1:19323/site/info.json 请求Url地址:http://www. ...
- 用jQuery与JSONP轻松解决跨域访问的问题
浏览器端的真正跨域访问,推荐的是目前jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的. var qsData = {'searchWord':$("# ...
- C# 和Jsonp的一个小demo 用jQuery与JSONP轻松解决跨域访问的问题
客服端: 在A项目下面 建立一个 JsonpClient.aspx页面,代码如下: <%@ Page Language="C#" AutoEventWireup=& ...
- spring boot 解决跨域访问
package com.newings.disaster.shelters.configuration; import org.springframework.context.annotation.B ...
- CORS解决跨域访问问题
简言之,CORS就是为了让AJAX可以实现可控的跨域访问而生的. Tomcat下的配置 下载cors-filter-1.7.jar,java-property-utils-1.9.jar [下载 ...
- 深入了解jsonp解决跨域访问
在这个项目中,我们做的充分利用jsonp这是一个特点跨界,完成简单的单点登录认证和权限控制的统一.道,各有各的优点.各有各的优点,选择什么方式实现全然取决于我们自己或者项目经理的开发经验,对各种框架的 ...
随机推荐
- 13.git别名
虽然别名不是很重要,但是你大概应该知道如何使用它们. Git 并不会在你输入部分命令时自动推断出你想要的命令. 如果不想每次都输入完整的 Git 命令,可以通过 git config 文件来轻松地为每 ...
- CCF201409-1相邻数对
试题编号: 201409-1 试题名称: 相邻数对 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 给定n个不同的整数,问这些数中有多少对整数,它们的值正好相差1. 输入格式 ...
- webpack之傻瓜式教程及前端自动化入门
原文地址:https://www.cnblogs.com/liqiyuan/p/6246870.html 接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天 ...
- SQL 查询:查询学生平均成绩
编程萌新,因为遇到这么个SQL 查询的问题:在一张表A里有如下字段:学生姓名.学科名.学科成绩.写一条SQL 语句查出各科平均成绩并按学生姓名分组,按如下格式显示:学生姓名|语文|数学|英语.一开始遇 ...
- 文本处理三剑客之 Sed ——高级编辑命令
本篇介绍sed的高级编辑命令 高级编辑命令 P:打印模式空间开端至\n内容,并追加到默认输出之前 n: 读取匹配到的行的下一行覆盖至模式空间 N:读取匹配到的行的下一行追加至模式空间 h: 把模式空间 ...
- Android(java)学习笔记211:Android线程池形态
1. 线程池简介 多线程技术主要解决处理器单元内多个线程执行的问题,它可以显著减少处理器单元的闲置时间,增加处理器单元的吞吐能力. 假设一个服务器完成一项任务所需时间为:T1 创建线程时间, ...
- Android(java)学习笔记207:Android下的属性动画(Property Animation)
1. 属性动画(Property Animation)引入: 在手机上去实现一些动画效果算是件比较炫酷的事情,因此Android系统在一开始的时候就给我们提供了两种实现动画效果的方式,逐帧动画(fra ...
- sort给文件按照大小排序
ls -l|sort -n -k5 -n 表示以数值排序-k5 表示以第几列排序还可以用 -t参数指定行内容的分隔符 参考链接:http://www.cnblogs.com/myd620/p/6002 ...
- 【转】Impala安装json解析udf插件
背景 Impala跟Hive一样,是常用的数据仓库组件之一.熟悉Hive的同学肯定知道,Hive官方提供了get_json_object函数用于处理json字符串,但是Impala官方并没有提供类似的 ...
- 华为交换机SSH配置
设备:S5700 一.在本地设备服务端生成秘钥对 [Huawei]rsa local-key-pair create 二.配置VTY [Huawei]user-interface vty 0 4进入虚 ...