當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

已拦截跨源请求：同源策略禁止读取位于XXXXXXXXXXXXXXXX/demo_test.txt 的远程资源。（原因：CORS 请求不是 http）

發布時間：2023/12/20 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了已拦截跨源请求：同源策略禁止读取位于XXXXXXXXXXXXXXXX/demo_test.txt 的远程资源。（原因：CORS 请求不是 http）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

完整問題復現如下:

已攔截跨源請求：同源策略禁止讀取位于XXXXXXXXXXXXXXXX/demo_test.txt 的遠程資源。（原因：CORS 請求不是 http）

原始代碼index.html在附錄中

##############################################################################################

解決方案:

概念上:

CORS請求和HTTP請求不是一個東西。

CORS請求的協議是CORS

HTTP請求的協議是HTTP

1./home/appleyuchi/load_test下面放置demo_test.txt和index.html(html中的代碼不需要修改)

demo_test.txt里面的內容是:

"這里是輸出的內容"

nginx -c /etc/nginx/nginx.conf(該文件在文末附錄中)

nginx -s reload

瀏覽器打開

http://127.0.0.1:10072/load_test/

點擊

############################附錄##################################################################

/etc/nginx/nginx.conf

user root; worker_processes 2; error_log /usr/local/nginx/error.log; pid /usr/local/nginx/nginx.pid;events {worker_connections 1024; }http {include /usr/local/nginx/conf/mime.types;default_type application/octet-stream;server {listen 10072;server_name localhost;access_log /var/log/nginx/access.log;#配置跨域add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Headers X-Requested-With;add_header Access-Control-Allow-Methods GET,POST,OPTIONS;location / {root /home/appleyuchi;autoindex on;#proxy_pass http://127.0.0.1:10071;#proxy_set_header Host $host;#proxy_set_header X-Real-IP $remote_addr;#proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}}}

/home/appleyuchi/index.html如下:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){$("button").click(function(){$("#div1").load("demo_test.txt");}); }); </script> </head> <body><div id="div1"><h2>使用 jQuery AJAX 修改文本內容</h2></div> <button>獲取外部內容</button></body> </html>

總結

以上是生活随笔為你收集整理的已拦截跨源请求：同源策略禁止读取位于XXXXXXXXXXXXXXXX/demo_test.txt 的远程资源。（原因：CORS 请求不是 http）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。