Vue中跨域以及sessionId不一致问题解决方法

在使用Vue和SpringBoot做前后端分离项目时,会出现以下问题:

  1. 前端直接请求数据会出现跨域访问限制的问题。
  2. 如果登录时还需要图片验证码验证,首先需要请求获取验证码的接口,然后将验证码存入session中并返回给前端,登录时拿用户输入的验证码和session中保存的验证码比较,这时会发现session中获取不到之前存入的验证码,这是sessionId改变导致的。

1.后台数据请求部分处理

后台使用SpringBoot,需要配置过滤器来处理跨域请求。

1.1 编写过滤器配置类 FilterConfig

在过滤器中配置Access-Control-Allow-Origin使后台支持跨域请求。

设置Access-Control-Allow-Credentials属性为true使sessionId保持不变。


import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import javax.servlet.http.*;
@Component
public class FilterConfig implements HandlerInterceptor{
	
	public void afterCompletion(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2, Exception arg3)
            throws Exception {
    }
 
    public void postHandle(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2)
            throws Exception {
    }
 
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object arg2) throws Exception {
 
    	response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Headers", "Authorization,Origin, X-Requested-With, Content-Type, Accept,Access-Token");//Origin, X-Requested-With, Content-Type, Accept,Access-Token
        return true;
    }
}

关键是这两句 

response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));//支持跨域请求

response.setHeader("Access-Control-Allow-Credentials", "true");//是否支持cookie跨域

注意:当Access-Control-Allow-Credentials设置为ture时,Access-Control-Allow-Origin不能设置为*

1.2编写SpringMVCConfig类使用FilterConfig中的配置


import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.SpringBootConfiguration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@SuppressWarnings("deprecation")
@SpringBootConfiguration
public class SpringMVCConfig extends WebMvcConfigurerAdapter{
	@Autowired
	private FilterConfig filterConfig;
	
	public void addInterceptors(InterceptorRegistry registry){
		registry.addInterceptor(filterConfig).addPathPatterns("/**");
	}
}

2.前端使用 axios请求数据

axios默认是发送请求的时候不会带上cookie的,需要通过设置withCredentials: true来解决 

axios.defaults.withCredentials = true

 

  • 11
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
### 回答1: vue.js 是一个开源的 JavaScript 框架,用于构建用户界面,而 axios 是一个基于 promise 的 HTTP 客户端,用于在浏览器和 Node.js 发送 HTTP 请求。 在 vue.js 使用 axios 进行访问时,可能会出现访问错误。是指在浏览器通过 JavaScript 发起一个 HTTP 请求,该请求的目标服务器是与当前页面不同名、端口或协议的地址。 解决这个问题方法有多种: 1. 后端配置允许访问:在后端服务器进行配置,允许指定的名或端口进行访问。 2. 使用代理进行请求:在 vue.config.js 文件配置代理,将请求转发到目标服务器。例如,在 vue.config.js 文件添加以下配置: ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://api.example.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } }; ``` 这样,当你在前端代码发送以“/api”开头的请求时,将会使用代理进行请求。 3. JSONP:如果目标服务器支持 JSONP,可以使用 JSONP 进行请求。在 axios ,默认是不支持 JSONP 的,但可以通过配置实现。例如,在请求添加“jsonp”参数: ```javascript axios.get('http://api.example.com/data', { params: { callback: 'jsonCallback', dataType: 'jsonp' } }) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); ``` 通过以上方法,可以解决 vue.js axios 访问错误问题。根据具体情况选择合适的解决方法,以确保请求能够正常进行。 ### 回答2: Vue.js使用axios请求数据时,常常会遇到访问错误。这是因为浏览器的同源策略限制了不同名之间的访问。 解决这个问题方法有几种: 1. 使用代理 可以在项目的配置文件(vue.config.js或者nuxt.config.js)配置代理。通过将请求代理到同名下的接口,实现访问。 例如,可以在配置文件添加如下代码: ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://api.example.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 然后,在axios的请求使用相对路径(不包含名)进行访问。例如: ```javascript axios.get('/api/data') .then(response => { console.log(response.data) }) ``` 这样就可以访问目标接口了。 2. 设置服务器响应头 在目标服务器上,设置允许访问的响应头。一般来说,可以在后端的接口代码添加以下响应头: ```javascript app.use(function(req, res, next) { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); next(); }); ``` 这样浏览器就会允许访问该接口了。 3. JSONP JSONP是一种前端访问的解决方案。通过在请求添加一个回调函数作为参数,服务器将返回该函数的调用,并将数据作为参数传递给该函数。 例如,在axios请求使用JSONP: ```javascript axios.jsonp('http://api.example.com/data?callback=handleData') .then(response => { console.log(response.data) }) ``` 然后,在全局定义一个处理返回数据的函数: ```javascript function handleData(data) { console.log(data) } ``` 这样就可以通过JSONP实现访问了。 以上是几种解决Vue.jsaxios访问错误的方法,可以根据具体情况选择使用。 ### 回答3: 在Vue.js,由于浏览器的同源策略,如果我们的Vue应用与后端接口的名或端口不一致,会出现访问错误。然而,我们可以使用axios库来解决这个问题。 首先,为了解决访问错误,我们可以在后端的API接口添加响应头Access-Control-Allow-Origin: *,允许所有来源的请求访问接口。当然,我们也可以根据需求设置特定的源或名。 另外,我们还可以通过设置代理来解决访问问题。在项目的根目录下的`vue.config.js`文件,我们可以使用`devServer`配置项来设置代理。例如,我们可以将/api路径下的请求代理到http://localhost:8000路径下,具体配置如下: ``` module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8000', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 以上配置意味着,当我们的Vue应用发起/api路径下的请求时,它将被代理到http://localhost:8000路径下。`changeOrigin`选项设置为true时,请求头的host会被设置为目标url,同时`pathRewrite`选项可以重写请求路径,删除/api前缀。 在前端代码,我们可以使用axios来发起请求。例如,我们可以在Vue的组件使用axios来请求后端接口: ``` import axios from 'axios' export default { methods: { fetchData() { axios.get('/api/data') .then(response => { // 处理响应数据 }) .catch(error => { // 处理错误 }) } } } ``` 通过以上方法,我们可以解决Vue.jsaxios访问错误问题,实现与后端接口的通信。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值