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>