跨域请求的基本实现几种方式

简介: 跨域请求的基本实现几种方式

前言


由于我们在平时编程的时候,有可能进场跨域的访问来请求我们的数据,如果每一次都写jsonp或者javascript都会给我们带来很大的工作量。


正文


首先,我们所熟悉的jsonp:

其次是:我们使用Javascript应编码来进行实现我们的代码:

<script type="text/javascript">
    $(function () {
    function addScriptTag(src) {
            var script = document.createElement('script');
            script.setAttribute("type", "text/javascript");
            script.src = src;
            document.body.appendChild(script);
        }
        addScriptTag('http://open.iciba.com/dsapi/?callback=foo&date=' + dateString);
    });
    function foo(data) {
        ......
    };
</script>

最后是我们可以用Nginx代理来进行实现:

使用nginx代理是非常简单的,请看下面的操作过程:

首先在服务器上面更改请求的路径的代理:

7.jpg

一个配置文件里面的内容:

    server {
    listen 80;
    server_name blog.breakpoint.vip;
    #rewrite ^/(.*) https://$server_name$1 permanent; #跳转到Https
    location / {
            proxy_pass http://127.0.0.1:8084;
            #add_header Cache-Control no-cache;
            #add_header Cache-Control no-store;
            add_header Access-Control-Allow-Origin '*';
            }
    location ~*\.(txt){
        root /home/breakpoint/file/;
    }
    location /proxy/ {
    rewrite ^/proxy/(.*)$ /$1 break;  #对加了proxy前缀的请求加以区分,真正访问的时候移除这个前缀,这个前缀需要自定义
    proxy_pass https://cn.bing.com;  #将真正的请求代理到真实的服务器地址
    }
}

重新启动一下我们的nginx:

./nginx -s reload

之后我么请求一下网站,看一下我么最终的效果:

8.jpg

这是我们访问必应的每日一图,我们得到了我们想要的json。

至此结束。

相关文章
|
12天前
|
前端开发 安全 API
跨域请求的常见场景有哪些?
了解这些常见的跨域请求场景,有助于我们更好地理解和处理跨域问题,通过合理的技术手段和配置来实现跨域资源的安全访问和交互。
37 7
|
缓存 安全 前端开发
CORS——跨域请求那些事儿
【本期嘉宾介绍】睿得,具有多年研发、运维、安全等IT相关从业经历。目前从事CDN、存储、视频直播点播的技术支持。
4134 0
|
6月前
|
移动开发 JSON 前端开发
跨域资源共享(CORS):详解跨域请求的限制与解决方法
跨域资源共享(CORS):详解跨域请求的限制与解决方法
|
6月前
|
JSON 安全 JavaScript
jsonp和跨域:实现跨域请求的巧妙方法
jsonp和跨域:实现跨域请求的巧妙方法
|
6月前
|
缓存 监控 中间件
深入剖析跨域请求发送两次的原因及解决方案(下)
深入剖析跨域请求发送两次的原因及解决方案(下)
|
6月前
|
缓存 安全 网络协议
深入剖析跨域请求发送两次的原因及解决方案(上)
深入剖析跨域请求发送两次的原因及解决方案(上)
|
JSON 前端开发 安全
CORS跨域请求出现问题
1、问题描述 Access to XMLHttpRequest at ‘http://localhost:8080/user/register’ from origin ‘http://localhost:8002’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcar
|
JSON JavaScript 前端开发
如何处理跨域请求:JSONP、CORS 和代理服务器
处理跨域请求是前端开发中的常见挑战,因为浏览器的同源策略限制了在不同域名、协议或端口之间进行直接通信。为了解决跨域请求的问题,可以使用以下三种常见的方法:JSONP、CORS和代理服务器。
457 0
如何实现跨域请求?有哪些常用的方法?
如何实现跨域请求?有哪些常用的方法?
179 0
|
缓存 前端开发
CROS 跨域请求原理
CROS 跨域请求原理
160 0