前后端分离部署ajax跨域问题

w_t_y_y

已于 2024-01-04 14:14:00 修改

阅读量3.3k

点赞数 2

分类专栏： SpringBoot+VUE前后端分离部署文章标签： ajax vue.js 前端

于 2018-08-01 16:46:36 首次发布

本文链接：https://blog.csdn.net/w_t_y_y/article/details/81333595

版权

SpringBoot+VUE前后端分离部署专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1）介绍：跨域就是当在页面上发送ajax请求时，由于浏览器同源策略的限制，要求当前页面和服务端必须同源，也就是协议、域名和端口号必须一致。如果协议、域名和端口号中有其中一个不一致，则浏览器视为跨域，进行拦截。

2）demo演示跨域:

运行部署：

其中index.vue:

<template>
	<el-form label-width="500px" class="demo-ruleForm loginform" align="center">
		<el-form-item label="用户名">
			<el-input v-model="name"></el-input>
		</el-form-item>
 
		<el-form-item label="密    码" prop="pass">
			<el-input v-model="pwd" type="password" auto-complete="off"></el-input>
		</el-form-item>
 
		<el-form-item size="large">
			<el-button type="primary" @click="login()">登录</el-button>
			<el-button>取消</el-button>
		</el-form-item>
	</el-form>
</template>
 
<script>
	import axios from 'axios'
	/*var user=[{"name":"张三","pwd":"123"},
{"name":"李四","pwd":"456"}]; */
	var user;
	export default {
		data() {
			return {
				name: "",
				pwd: ""
			}
		},
		methods: {
			login() {
				//=>表示可以渲染模板数据
				axios.get('http://localhost:8082/user/select').then((response) => {
					console.log(response); //请求正确时执行的代码 
					alert(response);
					user = response.data;
					for(var i = 0; i < user.length; i++) {
						if(user[i].name == this.name) {
							if(user[i].pwd == this.pwd) {
								this.$router.push('/Main');
							} else {
								alert("密码错误");
							}
						}
					}
				}).catch(function(response) {
					console.log(response); //发生错误时执行的代码  
				});
			}
		}
	}
</script>
<style>
	.loginform {
		float: left;
		margin: auto;
	}
</style>

运行部署：

点击登录按钮会报错：No 'Access-Control-Allow-Origin' header is present on the requested resource。原因是当使用ajax访问远程服务器时，出于安全的考虑，默认禁止跨域访问导致的。

跨域最常见的有以下几种解决方法：

一、jsonp方式解决跨域：

1、原理：jsonp的原理就是利用了script标签不受浏览器同源策略的限制，然后和后端一起配合来解决跨域问题的。

2、实现方法：在客户端创建一个script标签，然后把请求后端的接口拼接一个回调函数名称作为参数传给后端，并且赋值给script标签的src属性，然后把script标签添加到body中，当后端接收到客户端的请求时，会解析得到回调函数名称，然后把数据和回调函数名称拼接成函数调用的形式返回，客户端解析后会调用定义好的回调函数，然后在回调函数中就可以获取到后端返回的数据了。

3、缺点：jsonp的优点就是兼容性好，可以解决主流浏览器的跨域问题，缺点是仅支持GET请求，不安全，可能遭受xss攻击。

4、demo：main.js引入：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

//引入Element
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import VueJsonp from 'vue-jsonp'




Vue.config.productionTip = false

/* eslint-disable no-new */
//引用Element
Vue.use(ElementUI)
//通过use方法，挂载到vue中
Vue.use(VueJsonp)
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

页面应用：

  login() {
      var dt = "&&name=" + this.name + "&&pwd=" + this.pwd;
      let url = 'http://localhost:8082/user/login';
      //   axios.post('http://localhost:8082/user/login',
      //     dt, { dataType: 'jsonp' }).then((response) => {
      //       if (response.data.res) {
      //         this.$router.push('/LoginMain');
      //       } else {
      //         alert(response.data.msg);
      //       }
      //     })
      this.$jsonp(url, {
        name: this.name,
        pwd: this.pwd
      })
        .then((json) => {
          // 返回的jsonp数据不会放这里，而是在 window.jsonpCallback
          console.log(json)
        })
    }

二、CORS方式解决跨域：

1、原理：cors是跨域资源共享，是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它 origin（域，协议和端口），使得浏览器允许这些 origin 访问加载自己的资源。服务端设置了Access-Control-Allow-Origin就开启了CORS，所以这种方式只要后端实现了CORS，就解决跨域问题，前端不需要配置。

2、demo：

（1）在Controller类上添加一个@CrossOrigin 注解，存在问题：get请求可以跨域，post请求仍然不可以。

（2）写成配置类：


package com.demo;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

 
@SpringBootApplication
@MapperScan("com.demo.dao")
public class Start {
	public static void main(String[] args) {
		SpringApplication.run(Start.class, args);
	}
	
	 private CorsConfiguration buildConfig() {
	        CorsConfiguration corsConfiguration = new CorsConfiguration();
	        corsConfiguration.addAllowedOrigin("*");
	        corsConfiguration.addAllowedHeader("*");
	        corsConfiguration.addAllowedMethod("*");
	        //corsConfiguration.addExposedHeader(HttpHeaderConStant.X_TOTAL_COUNT);
	        return corsConfiguration;
	    }

	    /**
	     * 跨域过滤器
	     *
	     * @return
	     */
	    @Bean
	    public CorsFilter corsFilter() {
	        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
	        source.registerCorsConfiguration("/**", buildConfig()); // 4
	        return new CorsFilter(source);
	    }
	}

或者


package com.demo.filter;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {

  @Override
  public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**").allowedHeaders("*")
      .allowedMethods("*")
      .allowedOrigins("*")
      .allowCredentials(true);
  }
}

三、：加一个过滤器：

package com.demo.filter;

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.HttpServletResponse;

import org.springframework.stereotype.Component;


@Component
public class OriginFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res,
            FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE,PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        chain.doFilter(req, res);
    }

    @Override
    public void destroy() {
        // TODO Auto-generated method stub

    }

}

四、搭建Node代理服务器解决跨域：

因为同源策略是浏览器限制的，所以服务端请求服务器是不受浏览器同源策略的限制的，因此我们可以搭建一个自己的node服务器来代理访问服务器。

大概的流程就是：我们在客户端请求自己的node代理服务器，然后在node代理服务器中转发客户端的请求访问服务器，服务器处理请求后给代理服务器响应数据，然后在代理服务器中把服务器响应的数据再返回给客户端。客户端和自己搭建的代理服务器之间也存在跨域问题，所以需要在代理服务器中设置CORS。

<!-- 引入axios发送请求 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    // 简单封装一个axios向代理服务器发送请求
    function proxyAxios(data) {
        return axios({
            url: 'http://localhost:8081/proxyApi', // 请求自己搭建的node代理服务器的地址
            method: 'POST',
            headers: { 'content-type': 'application/x-www-form-urlencoded' },
            data
        })
    }

    // 使用node代理服务器向服务器发送请求
    proxyAxios({
        url: 'https://class.imooc.com/getadver',// 需要代理访问真实服务器的url
        method: 'GET',
    }).then(res => {
        console.log('res:', res)
    }).catch(err => {
        console.log(err)
    })
</script>

node服务器代码如下：

/**通过nodeJS搭建自己的代理服务器来解决跨域问题 */
const axios = require('axios')
const express = require('express')
const bodyParser = require('body-parser')
const app = express()
// 使用第三方插件
app.use(bodyParser.urlencoded({extended: false}))
app.use(bodyParser.json())

// 监听post请求,处理代理接口
app.post('/proxyApi', (req, res) => {
    const {body} = req
	// 获取post请求的请求参数
    let reqParams = {}
	  for(const key in body) {
        reqParams = JSON.parse(key) // 获取到请求参数
    }

    // 设置响应头
    // 代理服务器设置CORS，允许跨域访问
    res.setHeader('Access-Control-Allow-Origin', '*') 
    res.setHeader('Access-Control-Allow-Methods', '*') // 允许所有的请求方式

    const {url, method = "GET", ...resConfig} = reqParams || {}
     // node代理请求服务器
     axios({
        url,
        method,
        ...resConfig
      }).then(result => {
        const {status, headers, data} = result
        res.status(status)
        res.setHeader('content-type', headers['content-type'])
        res.end(JSON.stringify(data)) // 给客户端返回数据
      }).catch(err => {
        res.end(JSON.stringify(err))
      })
})

// 监听请求
app.listen(8081, () => {
	console.log('服务启动成功，在8081端口监听请求....')
})

五、Nginx反向代理解决跨域：
nginx通过反向代理解决跨域也是利用了服务器请求服务器不受浏览器同源策略的限制实现的。

客户端请求nginx服务器，在nginx.conf配置文件中配置server监听客户端的请求，然后把location匹配的路径代理到真实的服务器，服务器处理请求后返回数据，nginx再把数据给客户端返回。大致流程如下：