H5跨域请求

White feathe

发布于 2021-12-08 14:26:23

5300

发布于 2021-12-08 14:26:23

文章被收录于专栏：White feathe 的博客

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

解决方案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 方式，请查看这里：在这里

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

选择nginx版本：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即可。