# Vue SPA SSR preview url

**URL:** <https://community.bloomreach.com/t/vue-spa-ssr-preview-url/1975>\
**Category:** Experience Manager (PaaS/OnPrem)\
**Created:** [June 9, 2020, 9:29am UTC](https://community.bloomreach.com/t/vue-spa-ssr-preview-url/1975 "2020-06-09T09:29:28Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rbbrtoo](https://avatars.discourse-cdn.com/v4/letter/r/858c86/32.png) [@Rbbrtoo](https://community.bloomreach.com/u/Rbbrtoo)\
**Post date:** [June 9, 2020, 9:29am UTC](https://community.bloomreach.com/t/vue-spa-ssr-preview-url/1975/1 "2020-06-09T09:29:28Z")

</div>

I’m working on integrating the new Vue SDK. I’m using Nuxt server side rendering and I’m trying to get the Experience Manager overlay to work. I’m passing the page object to the component with the initialize function from the spa-sdk with the following config:

> options: {  
> live: {  
> cmsBaseUrl:  
> ‘-url-/site’,  
> spaBaseUrl: process.env.VUE\_APP\_LIVE\_SPA\_BASE\_URL  
> },  
> preview: {  
> cmsBaseUrl:  
> ‘-url-/site/\_cmsinternal’,  
> spaBaseUrl: ‘/site/\_cmsinternal?bloomreach-preview=true’  
> }  
> },

However, the preview in the Experience manager is still pointing to the production url of the resource manager instead of using \_cmsinternal. Could this have something to do with the newly integrated rewrite rules in version 14.2?

---

<div class="post-metadata">

**Author:** ![dokmic](https://yyz1.discourse-cdn.com/flex027/user_avatar/community.bloomreach.com/dokmic/32/451_2.png) [@dokmic](https://community.bloomreach.com/u/dokmic)\
**Post date:** [June 9, 2020, 10:59am UTC](https://community.bloomreach.com/t/vue-spa-ssr-preview-url/1975/2 "2020-06-09T10:59:25Z")

</div>

Hey @Rbbrtoo,

Are you using UrlRewriter with the recommended configuration from our [documentation](https://documentation.bloomreach.com/14/library/concepts/spa-integration/url-rewriter-rules.html)?

The setup you are trying to configure is deprecated and will not work in the next major release. I would recommend using the latest approach without UrlRewriter. You can enable that as it is described [here](https://documentation.bloomreach.com/14/library/concepts/spa-integration/configure-hst-for-spa-sdk.html).  
Then, the configuration should be like:

```auto
{
  cmsBaseUrl: process.env.VUE_APP_CMS_BASE_URL
}

```

where `VUE_APP_CMS_BASE_URL` is `http://localhost:8080/site`.

Best,  
Michael

---

<div class="post-metadata">

**Author:** ![Rbbrtoo](https://avatars.discourse-cdn.com/v4/letter/r/858c86/32.png) [@Rbbrtoo](https://community.bloomreach.com/u/Rbbrtoo)\
**Post date:** [June 9, 2020, 11:36am UTC](https://community.bloomreach.com/t/vue-spa-ssr-preview-url/1975/3 "2020-06-09T11:36:50Z")

</div>

Hi @dokmic

Ah. So it is only accepting one config url from version 14.2? Then think an update of the documentation is in order 🙂 --\> [https://www.npmjs.com/package/@bloomreach/spa-sdk#configuration](https://www.npmjs.com/package/@bloomreach/spa-sdk#configuration)

---

<div class="post-metadata">

**Author:** ![Rbbrtoo](https://avatars.discourse-cdn.com/v4/letter/r/858c86/32.png) [@Rbbrtoo](https://community.bloomreach.com/u/Rbbrtoo)\
**Post date:** [June 9, 2020, 11:37am UTC](https://community.bloomreach.com/t/vue-spa-ssr-preview-url/1975/4 "2020-06-09T11:37:25Z")

</div>

Thank you, I have it working now 🙂

---

<div class="post-metadata">

**Author:** ![Yves\_Viegen](https://yyz1.discourse-cdn.com/flex027/user_avatar/community.bloomreach.com/yves_viegen/32/66_2.png) [@Yves\_Viegen](https://community.bloomreach.com/u/Yves_Viegen)\
**Post date:** [June 10, 2020, 6:32am UTC](https://community.bloomreach.com/t/vue-spa-ssr-preview-url/1975/5 "2020-06-10T06:32:06Z")

</div>

@dokmic the above configuration change indeed helped. We do get, what seems te be very random, CORS errors. Sometimes it works, sometimes it fails.

`Access to XMLHttpRequest at '.../site/resourceapi/' from origin 'VUE_APP_BASE_URL' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.`

While we do have this configured at the root mount in the hst:responseheaders.

We’re working within 14.2.0.

Any ideas what might cause that?

---

<div class="post-metadata">

**Author:** ![ard.schrijvers](https://yyz1.discourse-cdn.com/flex027/user_avatar/community.bloomreach.com/ard.schrijvers/32/309_2.png) [@ard.schrijvers](https://community.bloomreach.com/u/ard.schrijvers)\
**Post date:** [June 11, 2020, 3:09pm UTC](https://community.bloomreach.com/t/vue-spa-ssr-preview-url/1975/6 "2020-06-11T15:09:56Z")

</div>

Hi Yves,

Is it a normal GET request (to the CMS host without \_cmsinternal but  
with a ‘token’ header?) that fails due to CORS headers?

What do you have configured for hst:responseheaders? Perhaps this:

hst:responseheaders: [‘Access-Control-Allow-Origin: \*’]

Can you test it with browser caching disabled? I am curious whether  
that helps since that might give us an idea what is wrong and how to  
fix it. Thus the request returns from the cms domain but without the  
right Access-Control-Allow-Origin set, right?

Regards Ard

---

<div class="post-metadata">

**Author:** ![ard.schrijvers](https://yyz1.discourse-cdn.com/flex027/user_avatar/community.bloomreach.com/ard.schrijvers/32/309_2.png) [@ard.schrijvers](https://community.bloomreach.com/u/ard.schrijvers)\
**Post date:** [June 16, 2020, 7:02am UTC](https://community.bloomreach.com/t/vue-spa-ssr-preview-url/1975/7 "2020-06-16T07:02:11Z")

</div>

Hi Yves,

Did you get it to work? Does it still fail sometimes? If possible, let us know so we can try to improve the CORS headers if the problem is on our end

Regards Ard
