网页中引入YouKu的iframe，可以正常播放，但是报一个跨域错误，请问如何消除这个错误？

Question

在网页中引入<iframe height=500 width=100% src='https://player.youku.com/embed/XMzI0MjY2NTk3Ng==' frameborder=0 'allowfullscreen'></iframe>

视频可以正常播放，但是控制台中报一个错误：

Access to XMLHttpRequest at 'https://valc.atm.youku.com/vc...' from origin 'https://player.youku.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

另外还有五个警告：

• Mixed Content: The page at
  'https://player.youku.com/embe...' was loaded over
  HTTPS, but requested an insecure image
  'http://g4.ykimg.com/052100015...'. This content
  should also be served over HTTPS.

• Mixed Content: The page at 'https://player.youku.com/embe...' was loaded over HTTPS, but requested an insecure video 'http://cdn302.cp31.ott.cibntv...'. This content should also be served over HTTPS.
• WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost
• Mixed Content: The page at 'https://player.youku.com/embe...' was loaded over HTTPS, but requested an insecure video 'http://122.228.74.167/6571170...'. This content should also be served over HTTPS.
• index.js:1 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://valc.atm.youku.com/vc... with MIME type application/json. See https://www.chromestatus.com/... for more details.

请问怎么消除这几个警告和错误？

Answer 1

首先你要理解跨域问题是怎么产生的？是因为浏览器的安全机制，限制不能跨域去访问资源，那哪些情况是属于跨域的呢？

• 域名不同：如(http://www.xxx.com)与(http://www.yyy.com)
• 域名相同，端口号不同：如(http://www.xxx.com)与(http://www.xxx.com:9090) ...等等

那么怎样去解决跨域问题呢？像你这样的情况下可以试试nginx的反向代理去试试