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这是一个特点跨界,完成简单的单点登录认证和权限控制的统一.道,各有各的优点.各有各的优点,选择什么方式实现全然取决于我们自己或者项目经理的开发经验,对各种框架的 ...
随机推荐
- 基于Vue的WebApp项目开发(一)
了解webpack的魔力: 项目结构以及开发环境 webpack初体验之打包文件 1.首先创建三个文件,分别是index.html.main.js和calc.js index.html <!DO ...
- nest 排序
var result = client.Search<Person>(x => x.Index("personindex").Type("persont ...
- VS配置Qt
https://blog.csdn.net/qq_35488967/article/details/71516640
- Mysql学习---基础操作学习2
基本数据类型 Mysql基本数据类型:二进制,数值[整数,小数].字符串[定长,变长]. 二进制数据.时间和枚举集合 bit[(M)] 二进制位(101001),m表示二进制位的长度(1-64),默认 ...
- 039条件变量同步(Condition)
也是锁,这个锁多加了wait(),notify()唤醒一个进程,notifyall()唤醒全部进程方法,创建的时候默认是Rlock类型的锁,可以设置为lock类型的,默认就ok from random ...
- C#图解教程读书笔记(第7章 类和继承)
1.所有的类都继承自object 2.如何隐藏基类的成员 要隐藏一个继承的数据成员,需要声明一个新的相同类型的成员,并使用相同的名称. 通过在派生类中声明新的带有相同签名的函数成员,可以隐藏或掩盖继承 ...
- tomcat 8 startup.bat启动乱码问题
修改Tomcat bin目录下startup.bat文件 将call "%EXECUTABLE%" start %CMD_LINE_ARGS% 改为 call "%EX ...
- Bootstrap Multiselect
Getting Started Link the Required Files First, the jQuery library needs to be included. Then Twitter ...
- HTML5 classList API
Having thrust myself into the world of JavaScript and JavaScript Libraries, I've often wondered: Whe ...
- [cocos2d-x]-会动的精灵
小鸟一直在扑翅膀的代码块: auto sprite = Sprite::create(); Animation *animation = Animation::create(); animation- ...