小编Бог*_*нко的帖子

我正在制作 chrome 扩展，我需要向另一个域发出跨域 POST 请求。代码在 ChromeContent Script环境中运行，有一些限制。

我将我的代码注入到域看起来像的特定站点中，service.site.com我必须向域发出请求api.site.com

来自的响应标头api.site.com看起来像

access-control-allow-credentials: true
access-control-allow-headers: Authorization, Content-Type, X-Requested-With, Accept
access-control-allow-methods: GET, POST, PUT, DELETE, OPTIONS
access-control-allow-origin: https://service.site.com

如您所见，另一个域允许来自service.site.com. 这意味着我的请求标头的Origin标头应包含该 Origin。

但是 chrome 扩展为我添加了一个 Origin 标头！

现在它发送一个api.site.com带有标头的请求

Origin: chrome-extension://oeminagccdkclchnelmkbkcpcfnjgofj

并api.site.com可能阻止它？我没有收到任何回复。请求崩溃，我没有看到错误，也没有响应数据。

当然我在清单文件中添加了权限：

"permissions": [
  "*://service.site.com/*",
  "*://api.site.com/*"
],

它仍然不起作用。Chrome 扩展程序继续更改 Origin 标头并且服务器没有响应。或者它是否响应但我的浏览器阻止了它？我查不出来。如果我在 WEB 脚本环境中运行该请求，它运行良好，我会看到来自服务器的响应。但是我仍然必须在 Content-script 环境中运行它。

我什至尝试在 web 脚本环境中注入一个带有 post 请求的函数，并从内容脚本环境调用它，但如果我这样做，它会添加 Origin 标头并且它不起作用。

我还尝试使用 Chrome 扩展功能更改响应标头，希望能有所帮助

const responseListener = function(details){
  const …

我有 redux-saga，它应该在成功登录后将用户重定向到主页。我不使用react-router-redux或那样做，所以我的路由器没有连接到状态。

这是我的登录组件

const AdminLogin: React.FC<RouteComponentProps> = ({history}) => {
    const [form, setForm] = useState({username: '', password: ''});
    const user = useSelector(getAdminUser);
    const dispatch = useDispatch();
    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        dispatch(makeLoginAsync(form));
    };

    useEffect(() => {
        if (user && user.token) {
            history.push('/admin/main'); // here it is
        }
    }, [user, history]);


    return (
        <form onSubmit={handleSubmit} className="admin-login">
            // FORM HTML CODE
        </form>
    );
};

export default withRouter(AdminLogin);

请注意，我正在向 Action 发送表单，然后 Saga 正在监听我的 Action 并执行所有逻辑和效果。我认为在 Saga …