vue 在方法里面获取后端返回的响应头缺少属性

想要获取后端返回的响应头中的属性，你可以在 axios 或者其他请求库中的 then 方法中使用 response 对象来获取。response 对象中包含了响应头和响应数据等信息。具体来说，你可以通过 response.headers 对象来获取响应头中的属性。例如，如果你想要获取响应头中的 Content-Type 属性，可以使用 response.headers['content-type'] 来获取。另外，如果你在请求时设置了 withCredentials: true，那么在跨域请求时，还需要在响应头中设置 Access-Control-Allow-Credentials: true，才能够正确获取响应头信息。

相关问题

SpringBoot+vue做请求头中加token，，从后端到前端，到所有的工具类已经请求拦截器和响应拦截器的配置请给写个详细完整的例子

好的，以下是一个基于 SpringBoot + Vue 的请求头中加 token 的示例。

首先，在后端 SpringBoot 中，需要配置拦截器来验证 token。创建一个名为 TokenInterceptor 的拦截器类，并在其中实现 preHandle 方法：

@Component
public class TokenInterceptor implements HandlerInterceptor {

    @Autowired
    private JwtUtil jwtUtil;

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        String token = request.getHeader("Authorization");
        if (token != null && token.startsWith("Bearer ")) {
            token = token.substring(7);
            if (jwtUtil.validateToken(token)) {
                return true;
            } else {
                throw new RuntimeException("Token验证失败");
            }
        } else {
            throw new RuntimeException("缺少Authorization头信息");
        }
    }
}

其中，JwtUtil 是用来生成和验证 JWT token 的工具类。在 SpringBoot 的配置类中，需要将 TokenInterceptor 注册为拦截器：

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Autowired
    private TokenInterceptor tokenInterceptor;

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(tokenInterceptor).addPathPatterns("/**").excludePathPatterns("/login");
    }
}

在上面的代码中，我们将 TokenInterceptor 注册为拦截器，并且添加了一个 excludePathPatterns 方法，用来排除登录接口。

接下来，在前端 Vue 中，需要将 token 添加到请求头中。可以在 axios 的请求拦截器中添加一个 Authorization 头：

import axios from 'axios'

axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

在上面的代码中，我们使用 axios 的 interceptors 对象，添加了一个请求拦截器。在拦截器中，我们先从 localStorage 中获取 token，然后将其添加到请求头的 Authorization 字段中。

最后，如果使用了工具类来发送请求，也需要在工具类中添加 token：

import axios from 'axios'

const request = axios.create({
  baseURL: 'http://localhost:8080/api',
  timeout: 5000
})

export function login (data) {
  return request({
    url: '/login',
    method: 'post',
    data
  })
}

export function getUserInfo () {
  return request({
    url: '/userInfo',
    method: 'get'
  })
}

在上面的代码中，我们使用 axios 创建了一个名为 request 的对象。在发送请求时，我们直接调用 request 对象的方法，并且不需要手动添加 token。

这样就完成了请求头中加 token 的配置。需要注意的是，在每次登录时，后端需要返回一个 token 给前端，并且前端需要将其保存到 localStorage 中，以便后续使用。

vue3CORS 头缺少 'Access-Control-Allow-Origin'

在Vue 3中遇到CORS头缺少'Access-Control-Allow-Origin'的问题通常是因为浏览器的安全策略导致的。该错误表示你的请求被服务器拒绝了，因为源（或者发起请求的域）与服务器的CORS设置不兼容。

要解决这个问题，你可以尝试以下几种方法：

1. 在后端服务器上设置响应头：在服务器端添加响应头`Access-Control-Allow-Origin`，并将其设置为允许访问的域名。例如，如果你的前端应用运行在`http://localhost:8080`上，你可以设置`Access-Control-Allow-Origin: http://localhost:8080`。

2. 使用Proxy代理：在开发环境下，你可以配置一个代理来转发API请求。在Vue项目的根目录下，打开 `vue.config.js` 文件（如果没有则创建），并添加以下内容：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://example.com', // 将此处替换为你的API服务器地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

在上述示例中，所有以`/api`开头的请求都会被转发到 `http://example.com`。这样做可以绕过浏览器的CORS限制。