vue本地调用服务器接口跨域问题,也就是localhost:8080调用http://10.100.55.110:8000/api/userauth的跨域问题
其实,只需要配置vue的config/index.js文件就行了,其他的axios的baseURL不用管,不写。代码如下:
// see http://vuejs-templates.github.io/webpack for documentation.
'use strict'
var path = require('path')
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/ctx': {// 替换target中的请求地址,也就是说以后你在请求http://10.100.55.110:8000/api/userauth/这个地址的时候直接写成/ctx即可。
target:'http://10.100.55.110:8000/api/userauth', // 你请求的第三方接口
changeOrigin:true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite:{ // 路径重写,当路径中有ctx时,'^/ctx':'/ctx',路径中的ctx转为target中的地址,后面带有'/ctx';路径中没有ctx时,'^/ctx':'',路径中的ctx只转为target中的地址,后面不带'/ctx'
'^ /ctx': ''
}
}
},
cssSourceMap: false
}
}
然后,登录接口components/login.vue代码这样写:
<template>
<div id="login">
<span>用户名:</span><input type="text" v-model="rule.userName">
<span>密码:</span><input type="password" v-model="rule.passWord">
<button @click="dl()">登录</button>
</div>
</template>
<script>
import {b64_md5} from '../b64_md5/md5.js';
export default {
name:'login',
data(){
return{
rule:{
userName:'',
passWord:''
}
}
},
methods:{
dl:function(){
var pata={"userName":this.rule.userName,"password":b64_md5(this.rule.passWord)};
// console.log(pata);
var url="/ctx/verify/loginByPwd";
this.$api.post(url,pata).then(function(response){
console.log("response:"+response.status);
}).catch(function(error){
console.log("error:"+error);
});
}
}
}
</script>
最后,本地输出成功接口:http://localhost:8080/ctx/verify/loginByPwd
更多推荐




所有评论(0)