nginx跨域访问配置_cors跨域访问不了

nginx跨域访问配置_cors跨域访问不了跨域概念简单来说:两个url只要协议、域名、端口有任何一个不同,都被当作是不同的域,相互访问就会有跨域问题。案例例如:在开发前后端完全分离的系统中,服务端代码属于一个工程,前端代码属于另一个工程,前端开发人员在进行接口对接时,可能会在webstorm等工具进行编码,并用webstorm的内置服务器进行调试,这就会有跨域问题,因为,webstorm内置服务器默认前缀部分是http://localhost:63342/,而服务端接口的路径前缀部分一定不会是这样,这样便产生了跨域访问的问题。案例代码

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

跨域概念
简单来说:两个url只要协议、域名、端口有任何一个不同,都被当作是不同的域,相互访问就会有跨域问题。

案例
例如:在开发前后端完全分离的系统中,服务端代码属于一个工程,前端代码属于另一个工程,前端开发人员在进行接口对接时,可能会在webstorm等工具进行编码,并用webstorm的内置服务器进行调试,这就会有跨域问题,因为,webstorm内置服务器默认前缀部分是http://localhost:63342/,而服务端接口的路径前缀部分一定不会是这样,这样便产生了跨域访问的问题。

案例代码
例如如下这一段代码,在webstorm中调试这个ajax所在的页面,页面路径是http://localhost:63342/untitled/across-domain.html,而要访问的接口路径是http://localhost:8888/ssm/interfaces/test/m006
 

 $(function(){
        $.ajax({
            url: "http://localhost:8888/ssm/interfaces/test/m006",
            type: "POST",
            async: false,
            dataType: "json",
            contentType: "application/json",
            cache: false,
            data: JSON.stringify({
                        "id": "bgdsdgs",
                        "name": "name",
                        "email": "429661318@qq.com",
                        "voModel2": [{
                            "id": "429661318@qq.com",
                            "v3": {"id":"sdfghjkl"}
                        }]
                    }),
            success: function(data) {
                $("#text").html(JSON.stringify(data));
            },
            error: function(text) {
                $("text").html(JSON.stringify(text))
            }
        })

直接访问,打开浏览器的控制台查看,没错,提示的正是无法进行跨域访问。
这里写图片描述

1、要解决这个问题很简单,只要使页面的前缀和接口的前缀一致就可以了,因此可以使用nginx进行反向代理。打开nginx目录下的conf文件夹,在nginx.conf文件的配置如下

 

  #默认监听80端口,ip后面不加端口号默认就是80
        listen       80;
        #服务器地址
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        #项目根目录,一般就是启动页
        location / {
            #项目所在目录
            root   C:\Users\shengmengqi\WebstormProjects\angularJsFrame;
            #假设across-domain.html的首页,如果之后页面中跳转也是基于http://localhost/跳转
            index  across-domain.html;
        }
        #作用:访问的http://localhost/ssm/interfaces/相当于一个代理url,实际访问的
        是http://localhost:8888/ssm/interfaces/
        location /ssm/interfaces/{
            proxy_pass http://localhost:8888/ssm/interfaces/;

2、配置完毕,将ajax中的接口路径改为http://localhost/ssm/interfaces/test/m006,将ngnix启动起来,在任务管理器中是否有nginx进程,有的话说明启动成功,如果没有,可以查看nginx目录下log文件夹中的error.log,看哪里有问题进行修改,启动成功后,在浏览器地址栏直接访问localhost,这次结果就正确了。

这次的请求其实是走了nginx代理服务器的

总结
nginx的实际原理就是配置一个代理路径替换实际的访问路径,使得浏览器认为访问的资源都是属于相同协议,域名和端口的,而实际访问的并不是代理路径,而是通过代理路径找到实际路径进行访问,所以,不妨将nginx看作是给浏览器的一种障眼法好了,哈哈~
 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/187190.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Linux文本编辑器——vim编译器的全面讲解[通俗易懂]

    Linux文本编辑器——vim编译器的全面讲解[通俗易懂]vim编译器一概述二vim编译器常用的操作命令2.1vim编辑器的启动和退出2.2文件的打开和读取2.3文件保存与另存为2.4vim编辑器的删除与撤销2.5vim编辑器的复制与粘贴2.6vim编辑器的查找与替换三vim输入模式常见操作3.1快速进入输入模式3.2快速移动编辑四vim命令模式常见操作4.1行内快速跳转4.2行间快速跳转

    2022年7月26日
    4
  • 【转载】.NET Remoting学习笔记(一)概念

    【转载】.NET Remoting学习笔记(一)概念

    2021年11月18日
    43
  • windows环境下用c++实现socket编程

    windows环境下用c++实现socket编程一、什么是Socketsocket即套接字,用于描述地址和端口,是一个通信链的句柄。应用程序通过socket向网络发出请求或者回应。sockets(套接字)编程有三种,流式套接字(SOCK_STREAM),数据报套接字(SOCK_DGRAM),原始套接字(SOCK_RAW);前两种较常用。基于TCP的socket编程是采用的流式套接字。(1)SOCK_STREAM表示面向连接的

    2022年7月13日
    27
  • 《FFmpeg从入门到精通》读书笔记(五)

    《FFmpeg从入门到精通》读书笔记(五)写在前面2019.06.24第六章FFmpeg滤镜使用(至6.5结束)FFmpeg滤镜使用FFmpeg滤镜Filter描述格式参数排列方式[输入流或标记名]滤镜参数[临时标记名];[输入流或标记名]滤镜参数[临时标记名]…例如:输入两个文件,一个视频文件input1.mp4,一个图片logo.jpg,将图像流缩放为2000×2000分辨率,放置在视频的左上…

    2022年6月26日
    24
  • bfp是什么电子元件_ad原理图器件旁边有红色波浪线

    bfp是什么电子元件_ad原理图器件旁边有红色波浪线ISPpipelineDBS:校准经过OBC之前不同像素暗电流的差值。因为器件原因,会存在暗电流,存在暗电流的情况下会导致偏色。OBC:sensor电路本身存在暗电流,没有光线的时候,像素会有输出,OBC减去暗电流,找到0基准。LensShadding:镜头阴影校正镜头是一个凸透镜,在接收光线时,成像较远时,会造成斜光束慢慢减少,图片中心较亮,四周比较暗。PGN:3A统计计算模块(计算awb、af、ae)UDM:利用颜色插值,光分为r,g,b三原色,g是亮度,通过g的插值,得到一下.

    2022年9月4日
    3
  • Xcode签名安装_手机编程app

    Xcode签名安装_手机编程appXcode4 无签名生成app程序1.修改/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS[SDK版本].sdk/SDKSettings.plist文件,将CODE_SIGNING_REQ

    2022年9月20日
    0

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号