arco-design / arco-design-pro

An out-of-the-box solution to quickly build enterprise-level applications based on Arco Design.
https://pro.arco.design
MIT License
460 stars 91 forks source link

插入第三方脚本(腾讯地图)script,引起跨域错误。 #121

Open RobinYanZG opened 7 months ago

RobinYanZG commented 7 months ago

Basic Info

Extra info

错误信息如下: Access to XMLHttpRequest at 'https://vectorsdk.map.qq.com/fileupdate/jsapi/icon?id=0&type=img&version=-1' from origin 'http://localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

What is expected?

这个js是腾讯地图的JS SDK. 希望地图正常显示。 我使用create-react-app直接创建一个项目,并使用下面的代码可以正常显示 我也使用过ViteJS创建一个项目,也可以正常。 但是使用arco-cli创建arco-design-pro项目就会遇到跨域问题。

Steps to reproduce

复制下面的代码去任意页面

// src/TencentMap.js import React, { useEffect, useRef } from 'react';

const TencentMap = () => { const mapRef = useRef(null);

useEffect(() => { const script = document.createElement('script'); script.src = 'https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77'; script.type = 'text/javascript'; script.onload = () => { const center = new TMap.LatLng(39.98412, 116.307484); const map = new TMap.Map(mapRef.current, { center: center, //设置地图中心点坐标 zoom: 17.2, //设置地图缩放级别 }); }; document.body.appendChild(script);

// return () => {
//   document.body.removeChild(script);
// };

}, []);

return <div ref={mapRef} style={{ width: '100%', height: '500px' }}>

; };

export default TencentMap;

RobinYanZG commented 7 months ago

找到问题了。是MockJs的问题。。。那是一个快10年没维护的库了。。。不能换一个么。。。说cors的问题还挺多