How to optimally implement the front at the Vue back on Yii (preferably without CORS)?

The standard recommendation is to do two subdomain.
OK, but then comes the beloved CORS. It can be configured (there is also a lot of joy!), but he will constantly send PREFLIGHT requests to the so-called "complex" requests. Ie, one query will have two. Of course, this does not speed up the site (and annoying!).
Such a split will not be just for the so-called 'simple' queries. For example, to GET - it is considered a simple subject to the rest of the pack rules. But there is one but : if you use (and you use!) bearer tokens , then your request is not considered simple, because the presence of the Corso-otherwise the Authorization header. But then again, in our favorite double requests.
Of course, we can try to cache these OPTIONS , but many browsers will spit on our desires with a high steeple. And cache time limit of 600 seconds. So this is not a significant win. You can also remove the Authorization header and send the token directly in the query, which is also ugly (but we want beauty and correctness).
Accordingly, what to do? ))
Vue wants to be a separate application. When working kosher way through the CLI (useful!) generates a folder. How to slip it in Yii, so that all worked without dancing, CORS, and other fun things ? I don't have a REST API (although I have already written and configured), I need to work quickly and without complications. Or in our time it does not happen?

I used to make all crooked way , put js files in Yii templates, And so on. Have advanced people it causes nightmares. Now I want to do "as expected" to separate flies (Yii) and burgers (Vue). However, to brake just because of the advanced(moved?) architecture is not desirable.

Share considerations.
Thank you!

PS I Heard something about reverse proxy as a solution to this problem.But still I'm afraid not master. So I spent a week behind the development of the fashionable consoles, web packs, the settings of two subdomains, explore postman, cors and other things. The old fashioned way, by stuffing everything in Yii view function all would have been done long ago.
April 2nd 20 at 17:41
4 answers
April 2nd 20 at 17:43
Solution
Backend the backend will select the subdomain on the same domain as the front. Set that would work.

Then in the config add front location on /backend/, where the header Host with full domain name of buck (I. E. backend.domain.com) and proxy_pass to 127.0.0.1.

Although 500ms is complete nonsense. Ping to the States - 200ms mountain. How there goes 500-600 mystery.
Already set up two sub-domains. I have realized that you can try to configure the both front and back on the same domain.

Then in the config add front location on /backend/, where the header Host with full domain name of buck (I. E. backend.domain.com) and proxy_pass to 127.0.0.1.
That's not clear :) .
Will look for detailed description in the network.
Thank you! - kira_Rogahn14 commented on April 2nd 20 at 17:46
@kira_Rogahn14, here:

location /backend {
 rewrite /backend/(.*) /$1 break;
 proxy_set_header Host backend.domain.com;
 proxy_pass <a href="https://127.0.0.1;">https://127.0.0.1;</a>
}


Nobody wish such to be engaged. Also get rid of the OPTIONS on this shit gone 5-6 hours. - alexandre_Robel commented on April 2nd 20 at 17:49
@alexandre_Robel,
I will draw the answer!
df54fa6s-960.jpg

Thank you! It's much faster and easier. If in the future you will need the REST API for the app or something like that - it's already. And on the other hand it is not necessary now to fight with this radish cors and to resolve all enti options. - kira_Rogahn14 commented on April 2nd 20 at 17:52
April 2nd 20 at 17:45
OPTIONS contains almost no logic on the backend, except that the authorization check that you have because of it bombed? Total runs <50ms, well then have of the Internet depends.
"Repaired" two titles, and no longer worried.
The whole backend has long been aware of the OPTIONS.

Now I want to do "as expected" to separate flies (Yii) and burgers (Vue).

And bomb from Kors, but only needed to know that it only works between different domains, so why not just raise the backend and front on the same domain?
I asked for advice because I want to solve the problem.
"Repaired" two titles, and no longer worried.
what do you mean ?
You can be more specific.As it is repaired? Want to get rid of the anxiety :)

Here is an example. The server is in the States (it is clear that latency more than Uryupinsk server). Every second request my favorite OPTIONS
5de80c7327367493016160.jpeg

so why not just raise the backend and front on the same domain?

that is my question. How to do it. Usually I set up nginx on index.php. How can I configure one domain to the query to the back and the front were razrulivaet as it should be?

Thanks for the reply. - kira_Rogahn14 commented on April 2nd 20 at 17:48
@kira_Rogahn14,

How can I configure one domain to the query to the back and the front were razrulivaet as it should be?


Well, for example, the whole back will go through the /api. Total location /api proximedia in the back, the rest of the "try_files" in statics, if nothing is found — index.html - Berneice commented on April 2nd 20 at 17:51
@Berneice, "in theory it's a horse, but in practice it falls" :) a General description doesn't help me. How to implement such will look for examples online. )) - kira_Rogahn14 commented on April 2nd 20 at 17:54
April 2nd 20 at 17:47
I don't have a REST API (although I have already written and configured), I need to work quickly and without complications. Or in our time it does not happen?
Why API? Why vue? Why Yii? Didn't think the difficulty is in used tools?

However, to brake just because of the advanced(moved?) architecture is not desirable.
Say is correct, but "continue to eat a cactus". WHY?!

There's PHP, there is a JS/AJAX - everything!

Take and make so that there was no API/CORS and clouds "eating" the performance of unnecessary nested OOP-classes in PHP (for those who can code!).

The data exchange?
fetch() for json! method GET/POST and Content-type: text/plain

Want blocks of markup to quickly change without reloading the page and without CORS?
Easy: includeHTML (one line!)
The key point
(for those who can code!).


As the complexity of the project it often turns out that ready-made solutions is still better for not-too-experienced programmers. For example ,I see that vue components I much easier life in comparison with the period when I was doing SPA without them. Of course, the mother bison will write and "without it". And not experienced... let them study tools ready :). Just studying sometimes is hard :).

Thanks for the link - will read it. - kira_Rogahn14 commented on April 2nd 20 at 17:50
@kira_Rogahn14Realized. Then I have nothing to add.
Any questions - Welcome! - Evan commented on April 2nd 20 at 17:53
@Evan, thank you! - kira_Rogahn14 commented on April 2nd 20 at 17:56
Speak correctly

No, he said shit. Architecture (in one project) does not affect the performance, but saves you from a trillion problems in the future.

There's PHP, there is a JS/AJAX - everything!

All! Th this is where they come up with - what is JIT, TS, SPA, Java.. should go and tell colleagues how everything is easy!

without reloading the page and without CORS?

Where does cors and restart the page? It is to your creation is irrelevant.

(for those who can code!).

It's like, I wonder? In procedural style, or what? And you seriously have attributed his miracle to "normal code"? - alexandre_Robel commented on April 2nd 20 at 17:59
@alexandre_Robel, Hilarious) - Evan commented on April 2nd 20 at 18:02
@Evan, I wonder why I expected a different answer?) - alexandre_Robel commented on April 2nd 20 at 18:05
April 2nd 20 at 17:49
Good evening.

Vue wants to be a separate application. When working kosher way through the CLI (useful!) generates a folder. How to slip it in Yii,

Hundred years did not do anything in Yii, so do not judge strictly.
When you deploy to prod in the template(I'm talking about Yii shny template) in which you want Vue to give what you got out of the dist folder when you build the Vue application. When designing the Vue apps are just proximate all requests to Yii endpoint
Thank you.Everything is working. For local development web pack proxy where necessary. And prod two sub-domains and proxying to the backend forces in nginx.


location /backend {
rewrite /backend/(.*) /$1 break;
proxy_set_header Host backend.domain.com;
proxy_pass https://127.0.0.1;
}
- kira_Rogahn14 commented on April 2nd 20 at 17:52
@kira_Rogahn14, whatever. Need a refresher course, I still think it is possible without additional squats with 2 subdomains :). - israel71 commented on April 2nd 20 at 17:55
@israel71if there is another solution - write. Useful and me and those who will come on the same rake )) - kira_Rogahn14 commented on April 2nd 20 at 17:58

Find more questions by tags Vue.jsCORSRESTful APIYii