2019-08-21开发移动oa时,解决浏览器跨域问题

问题描述:1,前端用nginx 启动一个服务,http://localhost:8080/sxoa/#/。 
                  2,后端用nginx 启动一个服务,http://10.64.2.59:7001/ONLINE/HttpJSONServer。
                然后前端直接调后端接口,浏览器直接报 No 'Access-Control-Allow-Origin' header is present on the requested resource,看到此标志就引起了跨域问题。

解决问题: 方式1,直接使用nginx 前端服务器代理 后端服务器IP地址就Ok。
                    前端nginx配置如下:
server{

       listen:8080;

           server_name localhost;

         location /sxoa{
           alias D:/website/sxoa;

        }

         location /{#代理后端服务接口

            proxy_pass http://10.64.2.59:7001

        }   

}

,此方法就这样解决问题了。但由于后端接口都是通用一个接口,还存在其它业务项目都用此接口,所以不能暴露,就不允许代理。就引发了第二种解决跨域的方式 CORS。

        方式2:此方法是后端返回时向Response Headers 里面添加值 。 添加值有两种:直接在后端接口代码添加 headers 信息。
                    还有一种可以直接配置到nginx里面的.我就讲下后端nginx的配置。(我是前端同学,后端代码不会怎么搞。所以请理解下)

配置参考的https://segmentfault.com/a/1190000012550346?utm_source=tag-newest

location/ {add_headerAccess-Control-Allow-Origin *;add_headerAccess-Control-Allow-Methods'GET, POST, OPTIONS';add_headerAccess-Control-Allow-Headers'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';if($request_method='OPTIONS') {return204; }}。

上述通过header解决问题会遇到 传参复杂引起的另一问题。

复杂时,前端请求POST 会被转OPTION 方式,然后后端需要对OPTION方式进行处理。再返回以POST方式请求,然后就行了。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 原创作者:周立 周立SpringCloud 跨域的玩法有很多,例如服务器端设置、浏览器端设置、Jsonp等等。本文...
    LxjAzni丶7阅读 789评论 0 3
  • 1问题背景 公司项目调试期间,浏览网页的时候可能会浏览失败,调出F12查看报错,会看到以下报错信息No 'Acce...
    weidro阅读 4,523评论 0 7
  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    他方l阅读 1,132评论 0 2
  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    Yaoxue9阅读 1,407评论 0 6
  • 最近玩了一下owasp,碰到一个题目之前在ctf中也出过类似的题.做个记录有备无患. 题目第一步是要找到优惠码看下...
    摘月亮的人阅读 1,101评论 0 1

友情链接更多精彩内容