Django集成TradingView遇CORS错误，图表无法加载求助

在Django项目中集成TradingView组件时，控制台抛出CORS错误，导致图表无法加载。已完成Django端的CORS配置，且其他外部脚本可正常运行。

Django settings.py配置 #

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders',
]
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    "django.middleware.common.CommonMiddleware",
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',

]

CORS_ALLOWED_ORIGINS = [
    "http://127.0.0.1:8000",
]

HTML中的TradingView脚本配置 #

<script type="text/javascript" src="https://charting-library.tradingview-widget.com/charting_library/charting_library.standalone.js"></script>
<script type="text/javascript" src="https://charting-library.tradingview-widget.com/datafeeds/udf/dist/bundle.js"></script>

<script>
function initOnReady() {
    var widget = window.tvWidget = new TradingView.widget({
      library_path: "https://charting-library.tradingview-widget.com/charting_library/",
      debug: true, // uncomment this line to see Library errors and warnings in the console
      fullscreen: true,
      symbol: 'AAPL',
      interval: '1D',
      container: "tv_chart_container",
      datafeed: new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com"),
      locale: "en",
      disabled_features: [],
      enabled_features: [],
    });
};

window.addEventListener('DOMContentLoaded', initOnReady, false);

</script>

控制台错误信息 #

Access to script at 'https://charting-library.tradingview-widget.com/charting_library/bundles/runtime.22cd9f6fe908159906ae.js' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
blob:http://127.0.0.1:8000/283852f3-3565-423f-aeb4-75fc0a81c15e:2 

GET https://charting-library.tradingview-widget.com/charting_library/bundles/runtime.22cd9f6fe908159906ae.js net::ERR_FAILED 200 (OK)
blob:http://127.0.0.1:8000/283852f3-3565-423f-aeb4-75fc0a81c15e:7  Access to script at 'https://charting-library.tradingview-widget.com/charting_library/bundles/en.3732.1bd67796122e14c1a819.js' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
blob:http://127.0.0.1:8000/283852f3-3565-423f-aeb4-75fc0a81c15e:3 

GET https://charting-library.tradingview-widget.com/charting_library/bundles/en.3732.1bd67796122e14c1a819.js net::ERR_FAILED 200 (OK)
blob:http://127.0.0.1:8000/283852f3-3565-423f-aeb4-75fc0a81c15e:7  Access to script at 'https://charting-library.tradingview-widget.com/charting_library/bundles/9401.1a253c12a3b43291d008.js' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
blob:http://127.0.0.1:8000/283852f3-3565-423f-aeb4-75fc0a81c15e:4 

GET https://charting-library.tradingview-widget.com/charting_library/bundles/9401.1a253c12a3b43291d008.js net::ERR_FAILED 200 (OK)
blob:http://127.0.0.1:8000/283852f3-3565-423f-aeb4-75fc0a81c15e:1  Access to script at 'https://charting-library.tradingview-widget.com/charting_library/bundles/library.922da4a8fbaf39eb2333.js' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
blob:http://127.0.0.1:8000/283852f3-3565-423f-aeb4-75fc0a81c15e:5 

GET https://charting-library.tradingview-widget.com/charting_library/bundles/library.922da4a8fbaf39eb2333.js net::ERR_FAILED 200 (OK)

解决方案 #

问题根源 #

你的Django CORS配置仅控制自身服务器对外的跨域请求权限，当前错误是浏览器从http://127.0.0.1:8000请求charting-library.tradingview-widget.com资源时，对方服务器未返回允许跨域的响应头，此问题与你的Django配置无关。

可行解决方法 #

1. 改用TradingView标准iframe嵌入
   iframe的跨域限制比直接加载脚本宽松，官方提供的iframe通常已配置好CORS规则，示例代码：

   <iframe src="https://s.tradingview.com/widgetembed/?frameElementId=tradingview_container&symbol=NASDAQ:AAPL&interval=D&theme=light&style=1&locale=en&toolbarbg=f1f3f6&enable_publishing=false&hide_top_toolbar=true&allow_symbol_change=true&save_image=false" 
           width="100%" 
           height="600" 
           frameborder="0" 
           allowtransparency="true" 
           scrolling="no">
   </iframe>
   

2. 本地部署TradingView库
   将TradingView Charting Library下载到Django静态文件目录，修改配置指向本地资源，避免跨域请求：

   • 下载库文件至static/charting_library/目录
   • 更新HTML脚本配置：

     <script type="text/javascript" src="{% static 'charting_library/charting_library.standalone.js' %}"></script>
     <script type="text/javascript" src="{% static 'charting_library/datafeeds/udf/dist/bundle.js' %}"></script>
     <script>
     function initOnReady() {
         var widget = window.tvWidget = new TradingView.widget({
           library_path: "{% static 'charting_library/' %}",
           // 其余配置保持不变
         });
     };
     </script>
     

3. 配置反向代理（生产环境）
   在Django所在的Web服务器（如Nginx）中设置反向代理，将同域名下的路径映射到TradingView CDN，避免跨域：

   location /tradingview/ {
       proxy_pass https://charting-library.tradingview-widget.com/charting_library/;
       proxy_set_header Host charting-library.tradingview-widget.com;
       proxy_set_header Referer $http_referer;
   }
   

   随后修改HTML中的library_path为"/tradingview/"。

内容的提问来源于stack exchange，提问作者rjcode