开发环境中解决跨域问题,nginx和tomcat

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

有两种方式,一种是在前端配置,一种是在后端配置

在前端配置代理

    devServer: {
    port: 7070,
        proxy: {
      '/api': {
        target: 'http://localhost:8080',//如果不行可以写'^/api':''
        changeOrigin: true,
      },
    },
  }

在后端设置跨域资源共享(CORS)的注解

@CrossOrigin("http://localhost:7070")
public class TestController {

    @GetMapping("/test")
    public R<String> test(){
        String s = "帅哥";

        return R.success(s);
    }
}

跨域携带cookie等凭证的问题

需要在前后端都配置
在前端新建axios的时候添加withCredentials: true

const _axions = axios.create({
        baseURL: 'http://localhost:8080',
        withCredentials: true
      });

在后端添加文章来源地址https://www.toymoban.com/news/detail-477827.html

@CrossOrigin("http://localhost:7070",allowCredentials = "true")

到了这里,关于开发环境中解决跨域问题,nginx和tomcat的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 使用nginx解决跨域问题(前端解决)

    情况是这样的:编写好的前端页面本地打开是没有问题的,请求都能发出去,接收到正确的响应结果。但是,使用nginx来部署这个页面就会出现跨域问题。 跨域 :由于浏览器的同源策略,即属于不同域的页面之间不能相互访问各自的页面内容 注 :同源策略,单说来就是同协

    2024年02月11日
    浏览(44)
  • 使用Nginx解决跨域问题

    目录 使用Nginx解决跨域问题 1、修改浏览器、客户端访问地址 2、在nginx.conf配置文件需配置server 3、在Nginx中配置客户端访问的接口(按照规则或通配),并设置被代理的服务器 4、在Nginx中统一配置客户端访问的头部信息(解决跨域问题) 5、在服务器端设置相应的头部信息(

    2024年02月13日
    浏览(55)
  • Nginx跨域问题的解决方法

    Web前端开发经常会遇到跨域访问,如果没有办法让后台开放访问域,调用接口就会被浏览器拦截。解决跨域问题的方案,可以搭建一个后台服务做中间转发,也可以用 nginx https://so.csdn.net/so/search?q=nginx 转发。 问题发生在nginx 反向代理 https://so.csdn.net/so/search?q=%E5%8F%8D%E5%90%91%E

    2024年02月11日
    浏览(46)
  • 巧用Nginx配置解决跨域问题

    1,前端页面放在域名根目录,比如,http://www.xuecheng.com/ ,对应的nginx配置: 页面目录: 2,前端请求接口路径,在域名后面加一个目录 nginx 对api接口配置 其中的 $http_origin并不是nginx的内置参数,nginx支持取自定义的参数值,$http_XXX这个格式是nginx取请求中header的XXX的值的。这

    2023年04月11日
    浏览(41)
  • nginx 配置解决前端跨域问题

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

    2023年04月22日
    浏览(50)
  • Nginx 代理解决跨域问题分析

    当你遇到跨域问题,不要立刻就选择复制去尝试。请详细看完这篇文章再处理 。我相信它能帮到你。 分析前准备: 前端网站地址:http://localhost:8080 服务端网址:http://localhost:59200  首先保证服务端是没有处理跨域的,其次,先用postman测试服务端接口是正常的。 当网站8080去

    2024年02月09日
    浏览(56)
  • Nginx配置反向代理解决跨域问题

    一、下载 官网下载地址:http://nginx.org/en/download.html 我下载的版本:http://nginx.org/download/nginx-1.15.2.zip (我也是参考网上的步骤,所以下载的不是最新版) 二、解压 将文件解压到本地地址(地址尽量不要出现中文) 三、启动 使用cmd进入nginx.exe所在文件夹下,并执行start nginx

    2024年02月07日
    浏览(47)
  • nginx如何解决前后端跨域问题

    Nginx 可以通过以下两种方式来解决前后端跨域问题: 添加 CORS 头部 Nginx 可以通过添加 CORS 头部来解决跨域问题。CORS(Cross-Origin Resource Sharing)是一种机制,它允许 Web 应用程序从不同的域访问其资源。要在 Nginx 中添加 CORS 头部,可以在 Nginx 配置文件中的特定位置添加以下代

    2024年02月05日
    浏览(43)
  • vue项目跨域问题(图片跨域)devServer.proxy代理失效时,nginx反向代理解决跨域问题

    ​ 本篇文章主要记录个人在公司项目开发中所遇问题,主要内容:在vue项目的开发中图片所存的服务器/端口号和项目所在的服务器/端口号不同,出现了跨域问题的保错。 ​ 如果文章有歧义,请各位大佬指出,避免误导更多的人!! Bug起因 ​ 在vue项目的开发中图片所存的

    2024年02月15日
    浏览(46)
  • HTTP 之 options预请求 nginx 解决跨域 postman调试跨域问题

    get:参数在url上,浏览器长度有限制,不安全 post:参数不可见,长度不受限制 put:上传最新内容到指定位置 delete:删除请求的url所表示的资源 head:不返回相应主体,主要用于客户端查看服务器性能 options: 与head类似,是客户端用于查看服务器的性能 。JavaScript的XMLHttpRe

    2024年02月04日
    浏览(57)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包