vue js 跨域

<template>

<div>

<div class="login-wrap" v-show="showLogin">

<h3>登录</h3>

<p v-show="showTishi">{{tishi}}</p>

<input type="text" placeholder="请输入用户名" v-model="username" id="username">

<input type="password" placeholder="请输入密码" v-model="password" id="password">

<button v-on:click="login">登录</button>

<span v-on:click="ToRegister">没有账号？马上注册</span>

</div>

<div class="register-wrap" v-show="showRegister">

<h3>注册</h3>

<p v-show="showTishi">{{tishi}}</p>

<input type="text" placeholder="请输入用户名" v-model="newUsername" >

<input type="password" placeholder="请输入密码" v-model="newPassword">

<button v-on:click="register">注册</button>

<span v-on:click="ToLogin">已有账号？马上登录</span>

</div>

</div>

</template>

<script>

import {setCookie, getCookie} from '../../assets/js/cookie.js'

export default {

name: 'Login',

data () {

return {

showLogin: true,

showRegister: false,

showTishi: false,

tishi: '',

username: '',

password: '',

newUsername: '',

newPassword: ''

}

},

mounted () {

if (getCookie('username')) {

this.$router.push('/home')

}

},

methods: {

login () {

if (this.username === '' || this.password === '') {

alert('请输入用户名或密码')

} else {

alert(this.username)

let data = {'username':this.username,'password':this.password}

/*接口请求*/

this.$http.post('http://127.0.0.1:8081/test.jsp',{username:this.username,myPwd:this.password},{emulateJSON: true}).then((res)=>{

alert(res.data)

console.log(res)

if(res.data == -1){

this.tishi = '该用户不存在'

this.showTishi = true

}else if(res.data == 0){

this.tishi = '密码输入错误'

this.showTishi = true

}else if(res.data == 'admin'){

/*路由跳转this.$router.push*/

this.$router.push('/main')

}else{

this.tishi = '登录成功'

this.showTishi = true

setCookie ('username',this.username,1000*60)

setTimeou (function(){

this.$router.push('/home')

}.bind(this),1000)

}

})

}

}

}

}

</script>

<style>

.login-wrap {

text-align: center;

}

input {

display: block;

width: 250px;

height: 40px;

line-height: 40px;

margin: 0 auto;

margin-bottom: 10px;

outline: none;

border: 1px solid #888;

padding: 10px;

box-sizing: border-box;

}

p {

color: red;

}

button {

display: block;

width: 250px;

height: 40px;

line-height: 40px;

margin: 0 auto;

border: none;

background-color: #41b883;

color: #fff;

font-size: 16px;

margin-bottom: 5px;

}

span {

cursor: pointer;

}

span:hover {

color: #41b883;

}

</style>

this.$http.post('http://127.0.0.1:8081/test.jsp',{username:this.username,myPwd:this.password},{emulateJSON: true})

这一段表示跨域请求的http,emulateJSON:true一定要写明

JAVA后台写法：

<%@ page language="java" contentType="text/html; charset=GBK" pageEncoding="GBK"%> <% String userName = request.getParameter("username"); String password = request.getParameter("password"); response.setHeader("Access-Control-Allow-Origin", "*"); out.println("{'data':1}"); %>

如果不写response.setHeader("Access-Control-Allow-Origin", "*");

会出现跨域请求报错