JS - Ajax 跨域篇(下)

简介: JS - Ajax 跨域篇(下)

2、在HTTP服务器(eg:nginx or apache)中增加响应头——服务器容器配置

2.1、Nginx配置

  • 修改主机hosts文件增加映射本地域名:127.0.0.1 b.com(表示被调用方的域名)
  • 在conf目录下创建vhost目录
  • 修改nginx.conf在最后面增加一行代码:include vhost/*.conf;
  • 在vhost目录下创建b.com.conf
  • 启动niginx,访问b.com/test/get1

编写b.com.conf

server{
    listen 80;
    server_name b.com;
    location /{
        proxy_pass http://localhost:8080/;
        add_header Access-Control-Allow-Methods *;
        add_header Access-Control-Max-Age 3600;
        add_header Access-Control-Allow-Credentials true;
        add_header Access-Control-Allow-Origin $http_origin;
        add_header Access-Control-Allow-Headers $http_access_control_allow_headers;
        if ($request_method = OPTIONS){
            return 200;
        }
    }
}

Nginx语法注意:

(1)if 后面必须加一个空格。

(2)请求头必须小写,并且“-”必须变成“_”。

2.2、Apache配置

Apache配置

  • 修改conf/httpd.conf找到LoadModule vhost_alias_module module/mod_vhost_alias.so取消注释
  • 修改conf/httpd.conf找到LoadModule proxy_module module/mod_ proxy.so取消注释
  • 修改conf/httpd.conf找到LoadModule proxy_http_module module/mod_ proxy_http.so取消注释
  • 修改conf/httpd.conf找到LoadModule headers_module module/mod_ headers.so取消注释
  • 修改conf/httpd.conf找到LoadModule rewrite_module module/mod_ rewrite.so取消注释
  • 修改conf/httpd.conf找到Include conf/extra/httpd-vhosts.conf取消注释
  • 修改conf/extra/httpd-vhosts.conf在最后面增加下面的内容即可
<VirtualHost *:80>
    ServerName b.com
    ErrorLog "logs/b.com-error.log"
    CustomLog "logs/b.com-access.log" common
    ProxyPass / http://localhost:8080/
    # 把请求头的origin值返回到Access-Control-Allow-Origin字段
    Header always set Access-Control-Allow-Origin "expr=%{req:origin}"
    # 把请求头的Access-Control-Allow-Headers值返回到Access-Control-Allow-Headers字段
    Header always Access-Control-Allow-Headers "expr=%{Access-Control-Allow-Headers}"
    Header always set Access-Control-Allow-Methods "*";
    Header always set Access-Control-Max-Age "3600";
    Header always set Access-Control-Allow-Credentials ""true";
    # 处理预检命令OPTIONS,直接返回204
    RewriteEngine On
    RewriteCond %{REQUEST_METHOD}OPTIONS
    RewriteRule ^(.*)$"/" [R=204,L]
</VirtualHost>

2.3Spring框架支持

  • 在类或方法上使用注解@CrossOrigin即可支持跨域

二、调用方解决跨域问题

隐藏跨域

1、使用Nginx反向代理实现

  • 修改主机hosts文件增加映射本地域名:127.0.0.1 a.com
  • 在vhost目录下创建a.com.conf
  • 启动niginx,访问a.com/ajaxserver/get1

编写a.com.conf

server{
    listen 80;
    server_name a.com;
    location /{
         proxy_pass http://localhost:8081/;
    }
    location /ajaxserver{
         proxy_pass http://localhost:8080/test/;
    }
}

2、使用Apache反向代理实现

  • 修改conf/extra/httpd-vhosts.conf在最后面增加下面的内容即可
1<VirtualHost *:80>
    ServerName a.com
    ErrorLog "logs/a.com-error.log"
    CustomLog "logs/a.com-access.log" common
    ProxyPass / http://localhost:8081/
    ProxyPass /ajaxserverapache http://localhost:8080/test
</VirtualHost>

总结


  • 产生原因:主要是浏览器对Ajax请求的限制。
  • 解决思路:JSONP、支持跨域、隐藏跨域。
  • 核心原理:了解Http协议关于跨域方面的规定。
  • 解决方法:使用Filter、Nginx正反向代理、Apache正反向代理、Spring框架支持。
目录
相关文章
|
1天前
|
移动开发 前端开发 JavaScript
js之ajax |12-6
js之ajax |12-6
|
1月前
|
JavaScript 前端开发 网络协议
|
1月前
|
JavaScript 前端开发 安全
js之AJAX
js之AJAX
24 0
|
2月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第9天】JavaScript进阶:AJAX与Fetch API对比。AJAX用于异步数据交换,XMLHttpRequest API复杂,依赖回调。Fetch API是现代、基于Promise的解决方案,简化请求处理。示例:`fetch(&#39;url&#39;).then(r =&gt; r.json()).then(data =&gt; console.log(data)).catch(err =&gt; console.error(err))`。注意点包括检查HTTP状态、错误处理、CORS、Cookie和超时。Fetch提高了异步代码的可读性,但需留意潜在问题。
77 0
|
2月前
|
JavaScript
JS【实战】跨域的网页链接跳转
JS【实战】跨域的网页链接跳转
47 0
|
2月前
|
前端开发 JavaScript API
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
37 0
|
JavaScript 前端开发 定位技术
|
机器学习/深度学习 JavaScript 前端开发
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
73 2