Can vue-resource send POST request directly when cross domain? - ajax

Question

I use vue.js to build a frontend and run it on http://localhost:8080 with npm run dev to develop.
And I use flask to build a backend and run it on http://localhost:8081.
I also set the crossdomain decorator for my route in 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"
Then I send a POST request by vue-resource to the backend:
this.$http.post("http://localhost:8081/api", "somedata").then({}, {})
No surprisingly, the browser send an OPTIONS request.
So my questions are:
Now that the server side has allow crossdomain, can I send POST request directly by vue-resource?
If not, must I use CORS from flask_cors?
Is there any way that I can run frontend and backend both on 8080 port, which can prevents from crossdomain problem?

Answer 1

Well, I haven't seen all your front-end code, but I do wonder if you've set the Vue.http.headers?
you can, on the front end, set your common headers like this:
Vue.http.headers.common['Access-Control-Allow-Origin'] = value;
More information here:
CORS issue with Vue.js
EDIT: Did this solve your question?