vuejs 解决跨域访问问题
首先:
config/index.js下面的proxyTable配置您的服务访问基本地址,将changeOrigin设置为true即可,然后在你需要访问接口的地方,这样使用,以下是我的工程代码(前提是你已经安装了vue-resource,安装方式是:
vue-resource 导入
还有elementui导入方法都是一样 这里就以vue-resource为例
npm
install
vue-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这是一个特点跨界,完成简单的单点登录认证和权限控制的统一.道,各有各的优点.各有各的优点,选择什么方式实现全然取决于我们自己或者项目经理的开发经验,对各种框架的 ...
随机推荐
- JavaScript Event 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw
参考资料: 慕课网 DOM事件探秘 js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个事件,该事件会驱动某些函数 ...
- recvfrom WSAEFAULT 10014 的错误记录
在使用 recvfrom 时一直没报错, 像这样 recvfrom(sock, Data, , (sockaddr*)&server_addr, &send_size) 当我看见百度百 ...
- tcp.cc
ns2-tcp-tcp.cc /* -*- Mode:C++; c-basic-offset:8; tab-width:8; indent-tabs-mode:t -*- */ /* * Copyri ...
- Java学习笔记——关于位运算符的问题
我就之直接贴图了!不想排版了! 有什么问题,欢迎大家指出,帮助我提高,谢谢!
- SQL 查询:查询学生平均成绩
编程萌新,因为遇到这么个SQL 查询的问题:在一张表A里有如下字段:学生姓名.学科名.学科成绩.写一条SQL 语句查出各科平均成绩并按学生姓名分组,按如下格式显示:学生姓名|语文|数学|英语.一开始遇 ...
- Bootstrap Multiselect
Getting Started Link the Required Files First, the jQuery library needs to be included. Then Twitter ...
- Oracle 数据库视图与基表的关系
本文转载自:http://www.linuxidc.com/Linux/2015-03/115165.htm 一:首先解释什么是视图: 视图其实就是一条查询sql语句,用于显示一个或多个表或其他视图中 ...
- 小BAT解决大麻烦_某卡教室控制软件
@echo off mode con cols= lines= if "%1" == "h" goto begin mshta vbscript:)(windo ...
- shiro之cache问题
错误原因分析加解决方案,以供大家参考: 1.错误信息:net.sf.ehcache.ObjectExistsException: Cache shiro-activeSessionCache alre ...
- P2894 [USACO08FEB]酒店Hotel
P2894 [USACO08FEB]酒店Hotel 简单的线段树维护区间信息. 维护三个值,一个是从左端点能拓展的长度,一个是从右端点能脱产的的长度.另一个是整个区间内的最大连续零一长度. 记录这三个 ...