vue-resource可以跨域直接发送POST请求吗？

Posted 2023-02-22

【中文标题】vue-resource可以跨域直接发送POST请求吗？

【英文标题】：Can vue-resource send POST request directly when cross domain?

【发布时间】：2017-07-18 10:08:31

【问题描述】：

我使用 vue.js 构建前端并在 http://localhost:8080 上运行它，并使用 npm run dev 进行开发。

我使用flask构建一个后端并在http://localhost:8081上运行它。

我还在 Flask 中为我的路由设置了跨域装饰器：

def crossdomain(origin=None, methods=None, headers=None,
                max_age=21600, attach_to_all=True,
                automatic_options=True):
    if methods is not None:
        methods = ', '.join(sorted(x.upper() for x in methods))
    if headers is not None and not isinstance(headers, basestring):
        headers = ', '.join(x.upper() for x in headers)
    if not isinstance(origin, basestring):
        origin = ', '.join(origin)
    if isinstance(max_age, timedelta):
        max_age = max_age.total_seconds()

    def get_methods():
        if methods is not None:
            return methods

        options_resp = current_app.make_default_options_response()
        return options_resp.headers['allow']

    def decorator(f):
        def wrapped_function(*args, **kwargs):
            if automatic_options and request.method == 'OPTIONS':
                resp = current_app.make_default_options_response()
            else:
                resp = make_response(f(*args, **kwargs))
            if not attach_to_all and request.method != 'OPTIONS':
                return resp

            h = resp.headers

            h['Access-Control-Allow-Origin'] = origin
            h['Access-Control-Allow-Methods'] = get_methods()
            h['Access-Control-Max-Age'] = str(max_age)
            if headers is not None:
                h['Access-Control-Allow-Headers'] = headers
            return resp

        f.provide_automatic_options = False
        return update_wrapper(wrapped_function, f)
    return decorator

@app.route("/api", methods=['POST', 'OPTIONS'])
@crossdomain(origin="*")
def test():
    return "hello world"

然后我通过vue-resource向后端发送POST请求：

this.$http.post("http://localhost:8081/api", "somedata").then(, )

毫不奇怪，浏览器会发送一个OPTIONS 请求。

所以我的问题是：

现在服务器端已经允许跨域，我可以直接通过vue-resource发送POST请求吗？ 如果不是，我必须使用来自 flask_cors 的 CORS 吗？ 有什么方法可以在8080端口上同时运行前端和后端，从而防止跨域问题？

【参考方案1】：

好吧，我还没有看到你所有的前端代码，但我想知道你是否设置了 Vue.http.headers？

您可以在前端设置您的常用标题，如下所示：

Vue.http.headers.common['Access-Control-Allow-Origin'] = value;

更多信息在这里： CORS issue with Vue.js

编辑：这解决了你的问题吗？