`
baobeituping
  • 浏览: 1068468 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

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", "*");

会出现跨域请求报错

分享到:
评论

相关推荐

    nginx部署步骤,vue解决跨域

    vue 跨域解决 Linux上部署nginx

    Vue中跨域及打包部署到nginx跨域设置方法

    本文将详细介绍Vue项目开发中遇到的跨域问题及其解决方法,以及如何将打包后的Vue项目部署到Nginx服务器,并设置跨域。 ### 跨域问题的概述 跨域问题是指由于浏览器的同源策略限制,前端项目中的JavaScript代码...

    java中处理vue.js跨域问题

    java中处理vue.js跨域问题,把文件放在扫描目录下即可。

    VUE跨域chrome控件和vue开发组件

    在前端开发领域,Vue.js是一个非常流行的JavaScript框架,它提供了高效的数据绑定和组件化功能,使得构建用户界面变得更加简单和直观。在这个主题中,“VUE跨域chrome控件和vue开发组件”涉及到两个主要概念:Vue.js...

    Vue 3.x+axios跨域方案的踩坑指南

    前端使用Vue.js框架开发用户界面,而服务端则处理后端逻辑。跨域问题是在开发过程中不可避免的,特别是在前端使用Vue3.x框架结合axios库进行开发时。跨域请求是指前端代码试图从不同的域(协议、域名或端口)访问...

    【前端-PC】html vue.js 跨域.zip

    Vue.js 是一个流行的轻量级JavaScript框架,用于构建用户界面。它以其简洁的API、易于上手的特性和强大的功能而受到广泛欢迎。Vue的核心特性包括声明式渲染、组件化、虚拟DOM、指令系统等,这些使得开发者能高效地...

    vue 2.0跨域问题?.docx

    "Vue 2.0 跨域问题解决方案" 在 Vue 2.0 开发过程中,经常会遇到跨域问题,特别是在开发环境下调用测试线的接口或第三方的接口时。跨域问题是指由于浏览器的同源策略限制,导致不同域名下的资源不能被访问。下面...

    vue跨域请求

    Vue.js 是一款流行的前端JavaScript框架,它主要用于构建用户界面。在开发过程中,由于浏览器的同源策略限制,Vue应用在与不同源的API交互时,会遇到“跨域”问题。为了解决这个问题,Vue提供了多种跨域请求的解决...

    vue 跨域配置解决方案

    1、在使用vue开发的时候经常要涉及到跨域的问题,其实在vue cli中是有我们设置跨域请求的文件的。 2、当跨域无法请求的时候我们可以修改工程下config文件夹下的index.js中的dev:{}部分。 dev: { env: require('./...

    解决Vue调用springboot接口403跨域问题

    在当前的Web开发中,前后端分离架构变得越来越流行。这种架构意味着前端使用一种技术栈(如...通过这些配置,可以有效解决前端Vue.js应用在访问后端资源时遇到的跨域问题,从而使得前后端分离的开发模式得以顺利进行。

    tomcat跨域访问

    "tomcat跨域访问"这个主题就是关于如何配置Tomcat服务器,使其允许来自不同源(比如Vue.js开发环境)的跨域请求。 首先,理解同源策略是关键。同源策略是浏览器的一项安全机制,它限制了Web页面只能读取来自同一源...

    vue跨域的配置文件标准格式参考vue.config.js

    vue跨域的配置文件标准格式参考vue.config.js

    vue中axios实现数据交互与跨域问题

    本文将详细介绍如何使用axios在Vue.js项目中实现数据交互,并针对跨域问题给出解决方案。 首先,要在Vue.js项目中使用axios进行数据交互,首先需要安装axios模块。这可以通过npm或yarn来完成: ```bash npm ...

    iframe 跨域解决方法

    `util.js`和`xd.js`可能包含了处理跨域通信的JavaScript代码。例如,`util.js`可能包含了`CORS`或`PostMessage`相关的辅助函数,而`xd.js`可能用于`iframe`内部处理跨域消息。 为了实际应用这些方法,我们需要检查`...

    Vue动态加载图片在跨域时无法显示的问题及解决方法

    在vue-cli3内,直接编辑vue.config.js,如下: let proxyObj={}; proxyObj['/']={ ws:false, target:'http://localhost:8023',//后端地址 changeOrigin:true, pathRewrite:{ '^/':'' } }; module.exp

    详解Vue 开发模式下跨域问题

    解决 Vue 开发模式下跨域问题 在 Vue 开发模式下,跨域问题是我们经常遇到的问题。跨域问题是指在不同的域名之间进行资源请求时,出现的安全限制问题。解决跨域问题是非常重要的,因为它会影响我们项目的正常运行。...

    vue实现跨域的方法分析.docx

    通过上述介绍,我们可以看到Vue.js中有多种解决跨域问题的方法,包括通过后端更改Header、使用JSONP以及利用Vue CLI提供的代理功能。开发者可以根据项目的具体需求和技术栈选择最合适的方法来解决跨域问题。希望本文...

    vue-axios + vue3-axios Axiso解决跨域访问完整源码

    Vue.js 是一款非常流行的前端JavaScript框架,用于构建用户界面。Vue3 作为其最新版本,引入了许多优化和改进。在开发过程中,与后端API进行交互是常见的需求,此时我们通常会使用像 Axios 这样的库来处理HTTP请求。...

Global site tag (gtag.js) - Google Analytics