错误信息如下:
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.
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;