H5跨域请求

待我称王封你为后i 2022-08-20 05:21 201阅读 0赞

## **跨域请求有多种方案，就说说比较简单的几种方案吧** ##

--------------------

### **解决方案1：** ###

也是比较简单直白的一种方式：利用Google Chrome浏览器来实现JavaScript跨域请求，降低安全级，window方式如下：。

**操作方法：**

找到Google Chrome浏览器图标，右击找到 “属性”中的“快捷方式”中的“目标路径地址”。

加入到链接后面 –allow-file-access-from-files –disable-web-security 即可 。

最后在JS代码中（这样执行即可）：

$(function(){ 
        $.ajax({ 
            type : "post", 
            url : "http://172.0.0.1:9090/robot/getAnswerByUserId", 
            data : shopparams, 
            async : false, 
            success : function(data){  
                  if(data){
                    alert(data);
                  }
             } 
        }); 
     });

PS：ajax中的 URL 写入对方ip地址即可！

mac 方式，请查看这里：[在这里][Link 1]

--------------------

### **解决方案2：利用nginx来实现代理** ###

选择nginx版本：[http://nginx.org/en/][http_nginx.org_en]

我用的是 nginx-1.9.2。

操作步骤：

找到nginx.conf配置文件

修改nginx-1.9.2 –> conf

配置代码：

#user nobody;
    worker_processes  1;
    #error_log logs/error.log;
    #error_log logs/error.log notice;
    #error_log logs/error.log info;
    #pid logs/nginx.pid;
    events {
        worker_connections  1024;
    }
    http {
        include       mime.types;
        include   ./conf.d/*.conf;
        default_type  application/octet-stream;
        #log_format main '$remote_addr - $remote_user [$time_local] "$request" '
        # '$status $body_bytes_sent "$http_referer" '
        # '"$http_user_agent" "$http_x_forwarded_for"';
        #access_log logs/access.log main;
        sendfile        on;
        #tcp_nopush on;
        #keepalive_timeout 0;
        keepalive_timeout  65;
        #gzip on;
            charset GBK;     
            error_page   500 502 503 504  /50x.html;
        }

找到第12行的 include ./conf.d/\*.conf;（这个配置是引用的另一个文件，原因是尽量不修改此文件的内容）。  
其他地方尽量不要动，这个是引用另一个要修改的文件  
我的在D:\\nginx-1.9.2\\（nginx的安装目录）目录下新建了一个conf.d文件夹，在conf.d文件夹下再新建一个以 .conf结尾的文件（尽量不要起中文），我的文件叫 www.example.com.conf。

**www.example.com.conf的配置如下：**

upstream tomcat_cluster {
       #server 10.1.1.1:8080 weight=1 max_fails=2 fail_timeout=30s;
       server  10.100.142.50:9090 weight=1 max_fails=2 fail_timeout=30s;
    }
    server {
            server_name  localhost;
            listen       80;
            charset utf-8;
            sendfile        off;
            location = /favicon.ico {
                    log_not_found off;
                    access_log off;
            }
        index index.html index.htm index.jsp index.do index.action;
            root  D:/workspace/lnmp64/toumi-h5;
        location / {
                proxy_next_upstream http_502 http_504 error timeout invalid_header;
                proxy_set_header Host  $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_pass http://tomcat_cluster;
                #proxy_http_version 1.1;
                #proxy_set_header Connection "";
                expires      30d;
            }
            location ~.*\.(jpg|png|jpeg)$
            {
                    expires 30d;
            }
            location ~.*\.(js|css)?$
            {
                expires 7d;
            }
            location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|apk|ipa|zip|plist)$ {
                root D:/workspace/lnmp64/toumi-h5;
                expires      30d;
            }
            proxy_ignore_client_abort on;
            proxy_redirect off;
            server_name_in_redirect off;
            proxy_set_header Host $host:$server_port;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Via "nginx";
            proxy_buffering on;
            client_max_body_size 10m;
            client_body_buffer_size 128k;
            proxy_connect_timeout 150;
            proxy_send_timeout 150;
            proxy_read_timeout 150;
    }

PS：

只需修改第3行，16行39行即可。  
第3行存放的是服务器的ip跟端口号  
16行跟39行，是你的项目路劲地址。  
然后启动nginx即可。

--------------------

### **解决方案3：利用vagrant来实现代理** ###

其实vagrant可以认为是一个盒子，盒子可以放任何配置（虚拟机），在这里我也是利用nginx来做处理的。将其nginx打包放入Vagrant盒子中，配置起来比较繁琐，需要安装Vagrant！

**Vagrant介绍**

Vagrant 是一款用来构建虚拟开发环境的工具，非常适合 php/python/ruby/java 这类语言开发 web 应用，“代码在我机子上运行没有问题”这种说辞将成为历史。

我们可以通过 Vagrant 封装一个 Linux 的开发环境，分发给团队成员。成员可以在自己喜欢的桌面系统（Mac/Windows/Linux）上开发程序，代码却能统一在封装好的环境里运行，非常霸气。

**Vagrant 使用步骤**

访问链接地址：[http://segmentfault.com/a/1190000000264347][http_segmentfault.com_a_1190000000264347]

PS：nginx设置好了之后，刷新页面的时候，即可看到你想要的东西。

--------------------

**附：nginx 缓存配置。**

![这里写图片描述][20160412163755593]

--------------------

[Link 1]: http://www.cnblogs.com/wteng/p/5950004.html
[http_nginx.org_en]: http://nginx.org/en/
[http_segmentfault.com_a_1190000000264347]: http://segmentfault.com/a/1190000000264347
[20160412163755593]: /images/20220731/aac110463efc416d90ac868d74495404.png