H5跨域请求

2021-12-08 14:26:23 浏览数 (1)

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


解决方案1:

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

操作方法:

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

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

最后在JS代码中(这样执行即可):

代码语言:javascript复制
$(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

配置代码:

代码语言:javascript复制
#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的配置如下:

代码语言:javascript复制
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

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


附:nginx 缓存配置。


0 人点赞