码迷,mamicode.com
首页 > 编程语言 > 详细

Vue.js学习(三)—— 分别从前后端Nginx解决SpringBoot+vue.js项目中的跨域问题

时间:2020-07-10 19:06:59      阅读:63      评论:0      收藏:0      [点我收藏+]

标签:客户端   this   ide   直接   font   运行命令   sdn   response   port   

一、什么是跨域

  (1)跨域

  由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一个与当前页面地址不同即为跨域。存在跨域的情况:

网络协议不同,如http协议访问https协议。
端口不同,如80端口访问8080端口。
域名不同,如qianduanblog.com访问baidu.com。
子域名不同,如abc.qianduanblog.com访问def.qianduanblog.com。
域名和域名对应ip,如www.a.com访问20.205.28.90.

  (2)url格式

  一般格式:协议 + 域名(子域名 + 主域名) + 端口号 + 资源地址

  示例:https://www.dustyblog.cn:8080/say/Hello 是由https + www + dustyblog.cn + 8080 + say/Hello组成。

  只要协议,子域名,主域名,端口号这四项组成部分中有一项不同,就可以认为是不同的域,不同的域之间互相访问资源,就被称之为跨域。

  (3)Cors

  CORS全称为Cross Origin Resource Sharing(跨域资源共享), 每一个页面需要返回一个名为Access-Control-Allow-Origin的http头来允许外域的站点访问,你可以仅仅暴露有限的资源和有限的外域站点访问。

  我们可以理解为:如果一个请求需要允许跨域访问,则需要在http头中设置Access-Control-Allow-Origin来决定需要允许哪些站点来访问。如假设需要允许https://www.dustyblog.c这个站点的请求跨域,则可以设置:

  Access-Control-Allow-Origin:https://www.dustyblog.cn。

 

二、后端SpringBoot解决

  1、方案一:CORS局部配置-使用@CrossOrigin注解

  (1)在Controller上使用@CrossOrigin注解

  该类下的所有接口都可以通过跨域访问

@RequestMapping("/demo2")
@RestController
//@CrossOrigin //所有域名均可访问该类下所有接口
@CrossOrigin("https://blog.csdn.net") // 只有指定域名可以访问该类下所有接口
public class CorsTest2Controller {

    @GetMapping("/sayHello")
    public String sayHello() {
        return "hello world --- 2";
    }
}

  这里指定当前的CorsTest2Controller中所有的方法可以处理https://csdn.net域上的请求,其他域名不能请求

  (2)在方法上使用@CrossOrigin注解

@RequestMapping("/preUser")
@CrossOrigin("https://blog.csdn.net") 
public Map<String,String> preUser(){
  Map
<String,String> map = new HashMap<String,String>();
  map.put(
"preUser","success");
  return map;
}

  这里指定只有该方法可以处理https://csdn.net域上的请求,其他域名不能请求

  2、方案二:CORS局部配置-手工设置响应头(局部跨域)

@RequestMapping("/hello")
@ResponseBody
public String index(HttpServletResponse response){
    response.addHeader("Access-Control-Allow-Origin", "http://localhost:8080");
    return "Hello World";
}
Access-Control-Allow-Origin 表示允许哪些原始域进行跨域访问。
Access-Control-Allow-Credentials表示是否允许客户端获取用户凭据。
Access-Control-Allow-Methods 表示允许哪些跨域请求的提交方式。(例如GET/POST)
Access-Control-Expose-Headers 表示允许暴露哪些头部信息给客户端。
Access-Control-Max-Age 表示预检请求 [Preflight Request] 的最大缓存时间。

  3、方案三:CORS全局配置-实现WebMvcConfigurer(本人习惯用法)

  Spring Boot 2.0中已经废弃WebMvcConfigurerAdapter类, 开发人员可以通过实现WebMvcConfigurer接口实现相应的功能。

  新建跨域配置类:CorsConfig.java:
/**
 * 跨域配置
 */
@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Bean
    public WebMvcConfigurer corsConfigurer()
    {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").
                        allowedOrigins("https://www.dustyblog.cn"). //允许跨域的域名,可以用*表示允许任何域名使用
                        allowedMethods("*"). //允许任何方法(post、get等)
                        allowedHeaders("*"). //允许任何请求头
                        allowCredentials(true). //带上cookie信息
                        exposedHeaders(HttpHeaders.SET_COOKIE).maxAge(3600L); //maxAge(3600)表明在3600秒内,不需要再发送预检验请求,可以缓存该结果
            }
        };
    }
}

  4、方案四:CORS全局配置-使用Filter方式进行设置(过滤器实现)

  通过实现Fiter接口在请求中添加一些Header来解决跨域的问题,向请求端设置Response Header(响应头部)的Access-Control-Allow-Origin属性声明允许跨域访问。

@Component
public class CorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse res = (HttpServletResponse) response;
        res.addHeader("Access-Control-Allow-Credentials", "true");
        res.addHeader("Access-Control-Allow-Origin", "*");
        res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");
        res.addHeader("Access-Control-Allow-Headers", "Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN");
        if (((HttpServletRequest) request).getMethod().equals("OPTIONS")) {
            response.getWriter().println("ok");
            return;
        }
        chain.doFilter(request, response);
    }
    @Override
    public void destroy() {
    }
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }
}

  5、方案五:CORS全局配置-继承使用Spring Web中的CorsFilter

package com.garyond.hurricane.config;

import org.springframework.stereotype.Component;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

import java.util.Arrays;

/**
 *  跨域访问配置
 *
 *  @author Garyond
 */
@Component
public class CustomCorsFilter extends CorsFilter {

    public CustomCorsFilter() {
        super(configurationSource());
    }

    private static UrlBasedCorsConfigurationSource configurationSource() {
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.setMaxAge(36000L);
        config.setAllowedMethods(Arrays.asList("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS"));
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/v1/**", config);
        return source;
    }
}

  或者

package com.ranxx.conf;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * 跨域问题
 *
 * @author mousejoo
 */
@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 允许任何域名使用
        corsConfiguration.addAllowedHeader("*"); // 2 允许任何头
        corsConfiguration.addAllowedMethod("*"); // 3 允许任何方法(post、get等)
        return corsConfiguration;
    }

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

}

  或者

package com.example.longecological.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class GlobalCorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
          //放行哪些原始域
          config.addAllowedOrigin("*");
          //是否发送Cookie信息
          config.setAllowCredentials(true);
          //放行哪些原始域(请求方式)
          config.addAllowedMethod("*");
          //放行哪些原始域(头部信息)
          config.addAllowedHeader("*");
          //暴露哪些头部信息(因为跨域访问默认不能获取全部头部信息)
          config.addExposedHeader("content-type");

        //2.添加映射路径
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);

        //3.返回新的CorsFilter.
        return new CorsFilter(configSource);
    }
}

  

三、前段Vue.js解决

  解决方案:采用proxyTable配置代理跨域

  (1)打开项目根目录下的config/index.js文件,参考以下proxyTable部分的配置:

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: static,
    assetsPublicPath: /,
    // *********代理跨域 主要代码**********
    proxyTable: {
      /api: {  //匹配接口路径中的 /api,可以随意命名
        target: http://********:9001/api, //目标接口地址,设置调用的接口域名和端口号 别忘了加http、https
        changeOrigin: true, //是否跨域
        secure: true, // 允许https请求,https必须添加这个设置
        pathRewrite: {
          ^/api: ‘‘ // 路径重写 将 target 中的目标接口地址重写为 /api,这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用‘http://40.00.100.100:3002/user/add‘,直接写‘/api/user/add’即可
  } } }, }

  注意:每次修改配置文件需要重启服务才能生效:npm run dev

  (2)通过axios来实现发送访问

  在main.js中导入已安装好的axios,并挂载到原型上

import Axios from axios  //导入axios

//将axios挂载到原型上
Vue.prototype.$axios = Axios;

  (3)通过this.$axios.get().then()来实现数据请求

//发送get请求
show() {
      //用/api來代理‘http://localhost:8083‘
      this.$axios
        .get("/api/selectall")
        .then(res => {
          this.list = res.data.result;
          // }
        })
        .catch(e => {
          console.log(e);
        });
        },

//发送post请求
add() {
      this.$axios({
        method: "post",
        url: "/api/saveinfo",
        params: {
          name: this.name //传递的参数
        }
      }).then(res => {
                this.show();
      });
    },

  注意:此种跨域解决方案,只能适用于测试阶段,因为项目打包发布之后,由于proxyTable不能再使用,所以无法跨域了。正式环境中,前端项目和后端项目放在一起就不存在跨域问题了。如果非要跨域,则可以采取上面的后端解决方法或者下面的Nginx替代前端的proxyTable代理功能。

 

三、Nginx解决生产环境跨域问题

  1、安装好Nginx之后,打开安装目录下的conf/nginx.conf文件,参考以下server的简单配置:

server {
        listen       9091;       #监听的端口
        server_name  localhost;  #服务器名称

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   E:\hld-work\university\dist;  #项目物理路径
            index  index.html index.htm;         #项目的默认首页
        }   
        
        location /api {                                #检测并替换接口内的字符串
            proxy_pass http://**********:9001/api;   #跨域访问的目标URL
            proxy_set_header Host $host; 
            proxy_set_header X-Real-IP $remote_addr; 
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
            client_max_body_size 100m; 
        }
    }

  注:每次修改配置文件需要重启服务才能生效

  2、Nginx常用相关命令:

  需要在Nginx文件目录下运行命令行工具

  (1)启动

start nginx 或 nginx.exe

  (2)停止

nginx.exe -s stop 或 ginx.exe -s quit

  注:stop是快速停止nginx,可能并不保存相关信息;quit是完整有序的停止nginx,并保存相关信息。

  (3)重新载入

nginx.exe -s reload

  (4)重新打开日志文件

nginx.exe -s reopen

  (5)查看版本

nginx -v

 

  

 

Vue.js学习(三)—— 分别从前后端Nginx解决SpringBoot+vue.js项目中的跨域问题

标签:客户端   this   ide   直接   font   运行命令   sdn   response   port   

原文地址:https://www.cnblogs.com/javahr/p/13280643.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!