Question

我使用VueJS和http请求的vue-request。我尝试将用户订阅到Mailchimp列表但Mailchimp使用BasicAuth，所以我这样做：

   scope.$http.post('https://us15.api.mailchimp.com/3.0/lists/listid/members',
{...mydata...}, {headers: {Authorization: 'Basic myencodedAPIkey'}})

但我从API: 401 Unauthorized - Your request did not include an API key.

收到错误

因此，我检查Chrome上的网络日志，授权位于我的标题上：**Access-Control-Request-Headers: authorization**但它应该像**Authorization: myencodedAPIkey**

在控制台上，错误显示为：

XMLHttpRequest无法加载 https://us15.api.mailchimp.com/3.0/lists/listid/members。响应预检请求没有通过访问控制检查：否＆＃39;访问控制允许来源＆＃39;标题出现在请求的上资源。起源＆＃39; http://127.0.0.1:8000＆＃39;因此是不允许的访问。响应的HTTP状态代码为401。

当我使用Postman时，它正常工作，因为标题已正确发送。

Answer 1

这个问题似乎已经通过在每个请求上设置标头来解决 https://laracasts.com/discuss/channels/vue/how-to-solve-the-allow-control-allow-cross-in-the-vuejs-header-request-setting?page=2

并通过设置一次 Vue-Request not sending Authorization Header

Answer 2

当您尝试从一个主机向另一个主机请求时，您正在收到CORS错误，并且“另一个主机”也是如此。部分不允许它发生。为了防止出现此错误，您可以使用webpack proxy configuration，这样您就没有跨域请求，但如果您的api不允许跨源请求，我也不知道如何在生产环境中处理此问题

在我正在进行的项目中，我们的devServer配置如下

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>test</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, 
        minimum-scale=1.0, maximum-scale=1.0">
        <style>
           body {
                margin: 0px;
                background-color: #000000;
                overflow: hidden;
           }
        </style>
    </head>
    <body>

        <script src="three.js"></script>

        <script>
            var camera, scene, renderer;
            var mesh;
            init();
            animate();
            function init() {

                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                renderer.shadowMap.enabled = true;
                .shadowMap.type = THREE.PCFShadowMap;

                scene = new THREE.Scene();

                envMap( scene );

                document.body.appendChild( renderer.domElement );

                window.addEventListener( 'resize', onWindowResize, false );
            }
            function onWindowResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, window.innerHeight );
            }
            function animate() {
                requestAnimationFrame( animate );

                renderer.render( scene, camera );
            }
        </script>
    </body>
</html>

如果这样，proxy: { '/api': { target: 'http://localhost:8080/' } },上发生的任何请求都将重定向到/api/any/url

Vue-Request未发送授权标题

2 个答案: