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请求：

<script> 
import axios from 'axios'
    import qs from 'qs'
  export default {
    name: 'Login',
    data: function() {
      return {
         userNo: '',
         userPwd: '',
      }
    },
    methods: {
      submitForm: function() {
     //请求url，需要保证服务可用
     let url = 'http://localhost:8080/usermsg/login';
     //注意数据是保存到json对象的params属性
     axios.get(url, {
       params: {
         userNo: this.userNo,
         userPwd: this.userPwd
       }
     }).then(function(response) {
       console.log(response);
     }).catch(function(error) {
       console.log(error);
     });
      }
    }
  }
</script> 

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

 @RequestMapping("usermsg/login")
    public Object login(User user) {
        Map<String,Object> 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>corsFilter</filter-name>
    <filter-class>com.zking.vueserver.util.CorsFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>corsFilter</filter-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() {

	}
}