案例cookie实现跨域

(我的博客里有更新)

跨域,顾名思义,个人理解就是:任意两个url只要协议、域名、端口有任何一个不同，都被当作是不同的域，相互访问就会有跨域问题。

方案一(前端需要实现跨域)

例如如下这一段代码，在前端页面中调试这个ajax所在的页面，页面路径是http://localhost:8081/demo1/index.html，而要访问的接口路径是http://localhost:8082/demo2/login

$(function(){
        $.ajax({
            url: "http://localhost:8082/demo2/login",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify({
                        "name": "tomcat",
                        password:"oracle"
                    }),
            success: function(data) {
               alert("success")
            },
        })
访问结果坑定是报错,提示的正是无法进行跨域访问

那么问题就是解决跨域问题了

跨域要解决这个问题很简单，

只要使页面的前缀和接口的前缀一致就可以了，因此可以使用nginx进行反向代理。打开nginx目录下的conf文件夹，在nginx.conf文件的配置如下:

1.修改nginx.config配置:

#默认监听80端口，ip后面不加端口号默认就是80
        listen       80;
        #服务器地址
        server_name localhost;
        #charset koi8-r;
        #access_log logs/host.access.log main;
        #项目根目录，一般就是启动页
        location / {
            #项目所在目录
            root   C:\Users\shengmengqi\WebstormProjects\angularJsFrame;
            #假设across-domain.html的首页，如果之后页面中跳转也是基于http://localhost/跳转
            index across-domain.html;
        }
        #作用：访问的http://localhost:80/demo2/相当于一个代理url，实际访问的是http://localhost:8082/demo2/;
        location /demo2/{
            proxy_pass http://localhost:8082/demo2/;
        }

2.修改ajax中的请求url

$(function(){
        $.ajax({
            url: "http://localhost/demo2/login",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify({
                        "name": "tomcat",
                        password:"oracle"
                    }),
            success: function(data) {
               alert("success")
            },
        })

3.启动nginx.

将ngnix启动起来，在任务管理器中是否有nginx进程，有的话说明启动成功，如果没有，可以查看nginx目录下log文件夹中的error.log，看哪里有问题进行修改，启动成功后，在浏览器地址栏直接访问localhost，这次结果就正确了。

ajax的请求请求其实是走了nginx代理服务器的.

是不是感觉有点像tomcat配置虚拟路径的感觉啊

还有一种解决方案(前后端分离):

案例:业务上线以后，前端页面出现了跨域问题，域名1.xxx.com 跨域访问 2.xxx.com/login/的url，浏览器页面产生问题

在2.xxx.com的nginx配置项中，添加如下请求头

if ($http_origin ~* (http://1\.xxx\.com$)) {
add_header Access-Control-Allow-Headers 'Cookie,Set-Cookie,x-requested-with,content-type';
add_header Access-Control-Allow-Origin $http_origin ;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
}

大概解释一下，就是从1.xxx.com域名发的请求，可以跨域到2.sss.xxx/login

在2.sss.com的nginx配置项中，添加如下请求头

if ($http_origin ~* (http://1\.sss\.com$)) {
add_header Access-Control-Allow-Headers 'Cookie,Set-Cookie,x-requested-with,content-type';
add_header Access-Control-Allow-Origin $http_origin ;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
}

大概解释一下，就是从1.sss.com域名发的请求，可以跨域到2.sss.com/bond

进行上面的配置以后，跨域问题解决，浏览器不报错，但是又出现另一个问题，后端tomcat响应头中，一直Set-Cookie，登陆业务一直错误，

确认前端代码，有没有支持跨域请求，需要在js代码中添加一下代码，让前端支持跨域

$.ajax({url: "xxxxxx",// 将XHR对象的withCredentials设为truexhrFields:{withCredentials:true}});

解决方案三(这是大boss的方案:Nginx + Tomcat + HTTPS极速配置)

1.首先去阿里申请免费的https证书

1528815948944.pem;
1528815948944.key;

2.修改nginx配置文件 nginx.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;
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;

#tomcat集群的入口
upstream tomcat {
server 127.0.0.1:8180 ;

}

server   {
  listen       80 ;
        listen       443 ssl; # 监听https 请求
        server_name 127.0.0.1;#这里是你的域名，要与下面tomcat里的保持一致
  # ssl 证书配置路径(可花钱买)
  ssl_certificate      H://apache-tomcat-7.0.82//conf//1528815948944.pem;
  ssl_certificate_key H://apache-tomcat-7.0.82//conf//1528815948944.key;

  ssl_session_cache    shared:SSL:1m;
  ssl_session_timeout 5m;

  ssl_ciphers HIGH:!aNULL:!MD5;
  ssl_prefer_server_ciphers on;

#charset koi8-r;

#access_log logs/host.access.log main;

  location / {

   #处理浏览器OPTIONS 预请求，默认返回200
   if ($request_method = 'OPTIONS') {
    add_header 'Access-Control-Allow-Credentials' true;
    add_header 'Access-Control-Allow-Origin' "$http_origin";
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Type' 'application/json; charset=utf-8';
    add_header 'Content-Length' 0;
    return 200;
   }

   proxy_pass http://tomcat ;
   #tomcat支持https 请求，须tomcat 更改相关配置
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   proxy_set_header Host $http_host;
   proxy_set_header X-Forwarded-Proto https;
   proxy_redirect off;


        }

#error_page 404 /404.html;

# redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504 /50x.html;
        location = /50x.html {
            root   html;
        }

# proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index index.php;
        #    fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

# deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny all;
        #}
    }

    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name somename alias another.alias;

#    location / {
    #        root   html;
    #        index index.html index.htm;
    #    }
    #}

    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name localhost;

# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;

# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;

# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;

#    location / {
    #        root   html;
    #        index index.html index.htm;
    #    }
    #}

}

3.进入tomcat，找到conf文件夹中的server.xml

找到<Connector port="8080" protocol="HTTP/1.1" 这一行，修改为:

<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="443"
proxyPort="443" />

4.修改HOST里的value值，我这里修改为:

<Host name="<span style="color:#FF0000;">www.cjluzzl.cn</span>" appBase="webapps"
unpackWARs="true" autoDeploy="true">
<Valve className="org.apache.catalina.valves.RemoteIpValve"
remoteIpHeader="x-forwarded-for"
remoteIpProxiesHeader="x-forwarded-by"
protocolHeader="x-forwarded-proto" />
</Host>

到这里已经实现了前端跨域,要实现后端跨域还需加上以下配置:加个后端允许跨域

<mvc:cors>
    <mvc:mapping path="/**"
                      allowed-origins="*"
                      allowed-methods="POST, GET, OPTIONS, DELETE, PUT"
                      allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
                      allow-credentials="true" />
    </mvc:cors>

可在web.xml中添加,也可通过注解的方式允许跨域,我在这里用mvc.xml方式.可以通过https实现跨域访问啦.

nginx实现跨域访问(案例cookie实现跨域,)多方案实现相关推荐

apache ajax 跨域访问,Apache 实现AJAX跨域请求
当使用ajax跨域请求时,浏览器报错:XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin.肯 ...
php跨服务器访问不了,php跨服务器访问方法小结
本文实例总结了php跨服务器访问方法..具体分析如下: 近来项目中遇到跨服务器访问的问题,研究了好些日子,总结如下: 1.用file_get_contents方法 $host = 'url'; $ra ...
asp.net core 系列之允许跨域访问2之测试跨域(Enable Cross-Origin Requests:CORS)
这一节主要讲如何测试跨域问题你可以直接在官网下载示例代码,也可以自己写,我这里直接使用官网样例进行演示样例代码下载: Cors 一.提供服务方,这里使用的是API 1.创建一个API项目.或者直接 ...
Nginx配置跨域访问
由于浏览器同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为域名地址(在跨域问 ...
跨域访问的相关概念及解决方法
浏览器的同源策略理解"跨"之前, 先来看看它的反义词 "同". 出于安全的考虑,一个站点只能访问同源的资源:对于不同源的资源,是禁止访问的. 这里有几个问题? ...
Web应用跨域访问解决方案
Web应用跨域访问解决方案 Web应用的跨域访问解决方案 Web跨域访问解决方案做过跨越多个网站的Ajax开发的朋友都知道,如果在A网站中,我们希望使用Ajax来获得B网站中的特定内容,如果A网站与 ...
Web应用跨域访问及单点登录解决方案汇总
做过跨越多个网站的Ajax开发的朋友都知道,如果在A网站中,我们希望使用Ajax来获得B网站中的特定内容,如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题.Ajax的跨域访问问题是现有的Aj ...
JS跨域访问（ajax跨域）
好吧,国庆有点不务正业,玩了几天游戏,咳咳感觉还不错,放松下,本来是打算学angular2的,国庆的时候刚好也看到vue2的正式版本发布,恩,最后都没看.. 正言为什么会出现跨域? 跨域的产生是因 ...
Spring Boot 对CORS跨域访问的配置
Springboot 对于跨域请求的支持有两种配置方式: 一:注解配置 @CrossOrigin注解可以实现对CORS的启用. @RequestMapping("/get_api" ...

nginx实现跨域访问(案例cookie实现跨域,)多方案实现

案例cookie实现跨域

还有一种解决方案(前后端分离):

解决方案三(这是大boss的方案:Nginx + Tomcat + HTTPS极速配置)

nginx实现跨域访问(案例cookie实现跨域,)多方案实现相关推荐

最新文章

热门文章