Basic Info
- Package Name And Version: arco-design-pro@2.8.0
- Framework version: React
- Browser: chrome120.0.0.0
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;
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 <div ref={mapRef} style={{ width: '100%', height: '500px' }}>;
};
export default TencentMap;