项目里面怎么解决跨域的?

这篇具有很好参考价值的文章主要介绍了项目里面怎么解决跨域的?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一.前端配置跨域

  • proxy解决跨域

在vue.config.js中通过proxy devServer中配置反向代理。

devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    // 配置反向代理
    proxy: {
      // 当地址中有/api的时候会触发代理机制
      '/api': {
        target: 'http://ihrm-java.itheima.net/', // 要代理的服务器地址  这里不用写 api
        changeOrigin: true // 是否跨域
        // 重写路径
        // pathRewrite: {}
      }
    }
  },
  • Nginx反向代理

在nginx.conf 的配置

server {

      listen       8094; #监听端口

      server_name  localhost; #

      #charset koi8-r;

      #access_log  logs/host.access.log  main;

     location / {

          root   html;#文件根目录

          index  index.html index.htm;#默认起始页

      }
  • jsonp解决跨域

Jsonp 原理:动态获取script标签   缺点:只适用于get请求

  • cors解决跨域(后端常用)
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();
        //1) 允许的域,不要写*,否则cookie就无法使用了
        config.addAllowedOrigin("http://manage.leyou.com");
        config.addAllowedOrigin("http://www.leyou.com");
        //2) 是否发送Cookie信息
        config.setAllowCredentials(true);
        //3) 允许的请求方式
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");
        // 4)允许的头信息
        config.addAllowedHeader("*");

        //2.添加映射路径,我们拦截一切请求
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);

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

还有好几种但是常用的也就是这几种,小伙伴们有啥需要补充的评论区留言。文章来源地址https://www.toymoban.com/news/detail-682659.html

到了这里,关于项目里面怎么解决跨域的?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【软件测试】面试老约不到?软件测试简历项目经验怎么写?论项目经验的重要性......

    随着就业竞争越来越大,投简历获取面试机会,不仅仅需要有良好的技能储备,更需要一份优秀的求职简历。什么样的简历才能通过层层筛选,获得HR的青睐? 项目经验绝对是重要的参考之一。 一份简历的项目经验有多重要? 不管是专业的HR还是技术专家,在筛选简历时都有

    2023年04月12日
    浏览(49)
  • 跨域的五种解决方案详解

    CORS :全称cross origin resource share (资源共享) 工作原理: 服务器 在返回响应报文的时候,在响应头中 设置一个允许的header res.setHeader(‘Access-Control-Allow-Origin’, ‘*’) CORS :全称cross origin resource share (资源共享) 服务器 在返回响应报文的时候,在响应头中 设置一个允许的h

    2024年02月16日
    浏览(46)
  • uniapp 解决H5跨域的问题

    uniapp 解决h5跨域问题 manifest.json manifest.json文件中,点击“源码视图”,在此对象的最后添加以下代码:   意思就是用\\\"/api\\\"代替 baseUrl,baseUrl就是基本url路径的意思。 request.js请求数据的页面中,如果是写的baseUrl都要用“/api”来代替之前的baseUrl地址。 此时,页面请求数据,从

    2024年02月06日
    浏览(40)
  • axios如何解决跨域的方案

    由于解决跨域需要用到headers属性,所以在axios形参中需要用对象形式包裹,同时api接口也要放在url属性当中, 废话不多说,直接上代码,然后在请求接口 ---- 到浏览器的控制台 — 点击刚刚请求的接口 ---- 找到Request Headers 下 ----application/octet-stream ,如果有看到这个属性代表解

    2024年02月11日
    浏览(51)
  • 解决前端跨域的几种方法

    一、跨域报错         在我们实际开发过程中,都有遇到过跨域的问题,跨域报错如下: 二、为什么会报跨域?         跨域的本质是浏览器基于同源策略的一种安全手段,主要是考虑到用户的信息安全。何为同源策略呢?同源策略是一种约定,它是浏览器最核心也

    2024年02月09日
    浏览(49)
  • SpringBoot 项目中后端实现跨域的5种方式!!!

    出于浏览器的同源策略限制。 同源策略 (Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。 同源策略 同源策略

    2024年01月20日
    浏览(41)
  • 跨域的五种最常见解决方案

    在开发Web应用程序时,一个常见的问题是如何处理跨域请求。跨域请求是指来自不同源的请求,这些请求可能会受到浏览器的限制而不能被正常处理。在这篇文章中,我们将探讨跨域请求的常见解决方案,并了解每种解决方案的优缺点。 一、JSONP JSONP是一种常见的跨域请求解

    2024年02月01日
    浏览(44)
  • vue解决跨域的几种办法

    当我们遇到请求后台接口遇到 Access-Control-Allow-Origin 时,那说明跨域了。 跨域是因为浏览器的同源策略所导致,同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,同源是指:域名、协议、端口相同 解决跨域常用方法: 一、VUE中常用proxy来解决跨

    2024年02月15日
    浏览(47)
  • SpringBoot解决跨域的方法详细教程

    Spring Boot提供了多种解决跨域问题的方法,以下是其中几种常用的方法: 使用@CrossOrigin注解是一种简单且快速的解决跨域问题的方法。在Spring Boot的Controller类或方法上添加@CrossOrigin注解,可以指定允许跨域访问的源、方法、头部等信息。 1. 在Controller类或方法上添加@CrossOrig

    2024年02月13日
    浏览(38)
  • Vue2解决跨域的3种方式

    1.1 jsonp 以前的技术,通过script标签跨域请求,服务器端返回的是符合js语法的函数调用,函数的形参即数据 1.2 CORS 跨域资源共享,需要服务器端进行配置 1.3  服务器代理 (1) 通过在vue.config.js中配置proxy实现跨域 (开发阶段) (2) 通过Nginx服务器代理实现跨域 (生产阶段

    2024年02月04日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包