VueJS和SpringBoot Cross-Origin错误

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VueJS和SpringBoot Cross-Origin错误相关的知识,希望对你有一定的参考价值。

在尝试访问我的Rest API时,我遇到了一个大问题,使用我的VueJS前端的Springboot构建。

后端-URL = http://localhost:8080 前端-URL = http://localhost:8081

在main.js文件中,我为axios添加了以下默认值:

axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
axios.defaults.headers.common['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept';
axios.defaults.withCredentials = true;
axios.defaults.crossDomain = true;

在后端站点上,我添加了以下条目:

所有控制器

@CrossOrigin(origins = "http://localhost:8081")
@RestController
public class ControllerName {
...

NewFile:DevelopmentWebSecurityConfigurerAdapter(与主方法相同的包)

package de.my.server;

import java.util.Arrays;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpMethod;
import org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.CorsConfigurationSource;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import lombok.extern.slf4j.Slf4j;


@Slf4j
@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class DevelopmentWebSecurityConfigurerAdapter extends WebMvcConfigurerAdapter {

    @Bean
    CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(Arrays.asList("http://locahost:8081"));
        configuration.setAllowedMethods(Arrays.asList("GET","POST"));
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }

    protected void configure(HttpSecurity http) throws Exception {

        //http.csrf().disable();
        http
        .cors()
        .and()
        .csrf().disable()
        .anonymous().disable()
        .authorizeRequests()
        .antMatchers("/api").permitAll()
        .antMatchers(HttpMethod.OPTIONS, "/**").permitAll();

    }
}

新的过滤器“CorsFilter”(简单地将java文件添加到与main方法相同的包中)

package de.my.server;

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;

import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;


@Component
public class CorsFilter implements Filter {

    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        HttpServletRequest request= (HttpServletRequest) servletRequest;

        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "GET,POST,DELETE,PUT,OPTIONS");
        response.setHeader("Access-Control-Allow-Headers", "*");
        response.setHeader("Access-Control-Allow-Credentials", "false");
        response.setIntHeader("Access-Control-Max-Age", 3600);
        filterChain.doFilter(servletRequest, servletResponse);
    }


    public void init(FilterConfig filterConfig) {}

    public void destroy() {}
}

直到现在没有任何作用 有没有人提示我如何访问我的api?

亲切的问候 tschaefermedia

答案

在VueJS根目录中创建一个vue.config.js文件(如果该文件不存在)并添加它

// vue.config.js
module.exports = {
  // proxy all webpack dev-server requests starting with /api
  // to our Spring Boot backend (localhost:8088) using http-proxy-middleware
  // see https://cli.vuejs.org/config/#devserver-proxy
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8088',
        ws: true,
        changeOrigin: true
      },
      '/fileUpload': {
        target: 'http://localhost:8088',
        ws: true,
        changeOrigin: true
      }
    }
  },
  // Change build paths to make them Maven compatible
  // see https://cli.vuejs.org/config/
  outputDir: 'target/dist',
  assetsDir: 'static'
}

在我的例子中,对“/ api”和“/ fileUpload”的所有请求都被转发到我的Spring Java后端

我希望这可以帮助你一点,如果还没有解决

有关更多信息,请查看here

以上是关于VueJS和SpringBoot Cross-Origin错误的主要内容,如果未能解决你的问题,请参考以下文章

Vue项目直接部署Springboot项目里

使用 Spring Boot(VueJS 和 Axios 前端)禁止发布 403 帖子

SpringBook + Vue JS + Spring Security Cookie 未通过

nodejs vuejs java python 入门到高级视频

Dockerize vue js前端和spring boot后端并部署在kubernetes集群上

WebTestClient - 带有 Spring Boot 和 Webflux 的 CORS