Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 task done
RobinYanZG opened this issue Jan 19, 2024 · 1 comment
Open
1 task done

Comments

@RobinYanZG
Copy link

RobinYanZG commented Jan 19, 2024

Basic Info

  • Package Name And Version: [email protected]
  • 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;

@RobinYanZG
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant