• 使用nginx反向代理解决跨域问题


    1.下载ngnix稳定版   (http://nginx.org/en/download.html)

    2.解压到你中意的目录。

    3.将你的网页文件放到刚解压html文件目录下

    4.打开conf  > nginx.conf 配置文件,将server项目修改成:(修改完成记得cd到你解压的nginx的目录下运行 nginx -s reload 重启一下nginx)

    server {         
            listen        8848;#监听端口    
            server_name  localhost;#代理服务地址
            location / {
                root  html; 
                index  index.html index.php 1.php 1.html;
            }
            #开始配置我们的反向代理
            location /api{        #"/api"中的api可以替换为自定义的任何内容     
                rewrite ^/api/(.*)$ /$1 break;     
                include uwsgi_params;     
                proxy_pass https://cn.bing.com; #我们要反向代理的地址,这里以 必应 为例  
                charset utf-8;   #显示中文      
                add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址           
                add_header 'Access-Control-Allow-Credentials' 'true';       
                add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式            
                add_header 'Access-Control-Allow-Headers' 'Content-Type,*';  
            }
        }

    5.进入浏览器里面,访问 localhost:8848 或 127.0.0.1:8848(设置的监听端口,注意端口别冲突) 就能进到你项目的根目录;

    6.在网页中就可以使用  /api 来代理到你想要访问的服务器地址了,

    比如我想要请求的接口为:https://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=zh-CN;

    直接ajax 请求存在跨域(同源政策),所以我们进行上面的配置反向代理, 用 /api 来帮我们代理到  https://cn.bing.com,

    就可以吧请求的接口写为:/api/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=zh-CN 。

    var url = "/api/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=zh-CN";
     $.ajax({
       url:url,
       type:"post",
       dataType: "json",
       success: function(data){
        console.log(data);
       },
       error:function(){
        console.log("error")
       }
     });

    注意:如果你使用的是hbuider 等内置服务器 的IDE 就不能直接通过 “运行到浏览器来” 运行项目了,需要通过我们配置的 l ocalhost:8848 或 127.0.0.1:8848 来运行和调试我们的项目。

    完美解决跨域问题。

  • 相关阅读:
    Apache Pig的前世今生
    openssl之EVP系列之6---EVP_Encrypt系列函数编程架构及样例
    P3388 【模板】割点(割顶)
    让priority_queue支持小根堆的几种方法
    2017.11.7解题报告
    一个例子教你如何与出题人斗智斗勇
    debug
    树上倍增求LCA及例题
    素数的筛法
    Catalan卡特兰数入门
  • 原文地址:https://www.cnblogs.com/wubaiwan/p/12035319.html
Copyright © 2020-2023  润新知