spa之解决ajax跨域问题

今天给大家带来用户spa单页面应用程序实现登陆、注册功能，如果哪里不对，请多多指教。

npm install element-ui -S

 

1 导入组件

打开 src目录下的main.js，该文件是项目的入口文件，所以在这里导入，其他组件均可使用，不用再导入。

import Vue from 'vue'
 
//新添
import ElementUI from 'element-ui' 
 
//新增
import 'element-ui/lib/theme-chalk/index.css'
 
//新增
Vue.use(ElementUI) 
。。。

2 创建登录页面

2.1 创建登录组件 

1） 新建views目录，在目录上右击，选择新建vue（简单模块）创建Login

<template>
template>
 
<script>
script>
 
<style>
style>

2）在element-ui组件，在form组件中找到与登录页面类似的组件，拷贝代码到刚新建的Login组件中，修改为自己需要的登录页面，页面包含：账户，密码， 提交按钮

<template>
    <div>
        <el-form >
            <el-form-item label="账户" >
              <el-input type="password" v-model="userName" autocomplete="off">el-input>
            el-form-item>
            <el-form-item label="密码" >
              <el-input type="password" v-model="passWord" autocomplete="off">el-input>
            el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">提交el-button>
            el-form-item>
         el-form>
    div>
template>
 
<script>
  export default {
    name: 'Login',
    data: function() {
      return {
         userName: null,
         passWord: null,
      }
    },
    methods: {
      submitForm: function() {
          console.log("fdfdd");
      }
    }
  }
script>
 
<style>
style>

2.3 配置路由

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
 
//首先导入组件
import Login from '@/views/Login'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      //配置路由，根路径访问Login组件
      path: '/',
      name: 'Login',
      component: Login
    }
  ]

3 发送get请求：

跳转到后台指定路径http://localhost:8080/usermsg/login'如下

 @RequestMapping("usermsg/login")
    public Object login(User user) {
        Map map = new HashMap<>();
        if("admin".equals(user.getUserNo()) && "123".equals(user.getUserPwd())) {
            map.put("success", true);
            map.put("msg", "密码正确");
        } else {
            map.put("success", false);
            map.put("msg", "密码不正确");
        }
        return map;
    }

出现跨域请求问题

因为我们采用的是前后端分离的方式进行开发，前端和后端分别泡在不同的服务器上，基于安全性考虑，浏览器有同源策略，所以出现了跨域问题。
同源策略[same origin policy]是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。 同源策略是浏览器安全的基石。 

 

4）跨域问题的处理
在filter中处理跨域问题，关键代码：

// Access-Control-Allow-Origin就是我们需要设置的域名
// Access-Control-Allow-Headers跨域允许包含的头。
// Access-Control-Allow-Methods是允许的请求方式
httpResponse.setHeader("Access-Control-Allow-Origin", "*");// *,任何域名
httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE");
filterChain.doFilter(servletRequest, servletResponse);

配置到web.xml中，对所以请求进行拦截处理，可解决跨域问题。

<filter>
    <filter-name>corsFilterfilter-name>
    <filter-class>com.zking.vueserver.util.CorsFilterfilter-class>
filter>
<filter-mapping>
    <filter-name>corsFilterfilter-name>
    <url-pattern>/*url-pattern>
filter-mapping>

 

CorsFilter拦截器

package com.zking.vueserver.util;
 
import java.io.IOException;
 
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
/**
 * 配置tomcat允许跨域访问
 * 
 * @author Administrator
 *
 */
public class CorsFilter implements Filter {
 
	@Override
	public void init(FilterConfig filterConfig) throws ServletException {
	}
 
	@Override
	public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
			throws IOException, ServletException {
		HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
		HttpServletRequest req = (HttpServletRequest) servletRequest;
		// Access-Control-Allow-Origin就是我们需要设置的域名
		// Access-Control-Allow-Headers跨域允许包含的头。
		// Access-Control-Allow-Methods是允许的请求方式
		httpResponse.setHeader("Access-Control-Allow-Origin", "*");// *,任何域名
		httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE");
		httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept,jwt");
		//允许客户端，处理一个新的响应头jwt
		httpResponse.setHeader("Access-Control-Expose-Headers", "jwt");
		
		// axios的ajax会发两次请求，第一次提交方式为：option，直接返回即可
		if ("OPTIONS".equals(req.getMethod())) {
			return;
		}
		
		filterChain.doFilter(servletRequest, servletResponse);
	}
 
	@Override
	public void destroy() {
 
	}
}