JSOM using sp-rest-proxy / clarification needed

[dreamworks]

Hi,

first of all thx for your effort :)

I am trying to understand how to use JSOM via the proxy. Not sure, if I misunderstood something. So when I change the JSOM init scripts to query through the proxy (e.g. ) the init scripts are all loaded.

Anyhow I can't get a "working" ctx object as the url still wrong. I think I still somewhat misunderstand or do not get HOW to "configure" the proxyURL correctly. Just for clarification:

sp-rest-proxy is running on 127.0.0.1:9091 (vue) web code is runing on 127.0.0.1:5173

see attached screenshot. Maybe it also helps to clarify where ("other") people fail to undestand the docs :)

[dreamworks]

So I "discovered" that if I use var ctx = new SP.ClientContext("http://127.0.0.1:9091/sites/comp"); instead of SP.ClientContext.get_current()

it works.. Is that the intended way?

[koltyakov]

Thank you @dreamworks!

Not a Vue user, but it also supports dev server settings:

module.exports = {
  devServer: {
    proxy: {
      '^/_api': {
        target: '<url>',
        changeOrigin: true
      },
      '^/_vti_bin': {
        target: '<url>',
        changeOrigin: true
      },
    }
  }
}

So hostname and port is the same for /_api, /_vti_bin calls too.

Setting SP.ClientContext conditionally is also OK. Also, involving _spPageContextInfo. __webAbsoluteUrl, e.g. https://github.com/koltyakov/sp-rest-proxy/blob/master/src/utils/env.ts#L14, https://github.com/koltyakov/sp-rest-proxy?tab=readme-ov-file#load-page-context-helper

I'd just recommend checking that the same exactly code works in local and when deployed.

[dreamworks]

following your path I got it working using SP.ClientContext.get_current(), As I am using Vite instead of webpack, the config looks a little different (further down)

The proxy settings itself look a bit awkward, but this could be the case, `caus I used the SP server root url, instead of a site_url on sp-rest-proxy configuration.

Not sure, if I already "left" the "core" idea of sp-rest-proxy here by desperatly wanting to fetch the JSOM object, but all my create and permission management code runs on JSOM :)

And if one would ask me. sp-proxy might be anyhow a much better and clearer name for your wonderful project :) Kudos & very much appreciated!

Best regards from Germany!

 export default defineConfig({
  base: "",
  server: {
    proxy: {
      "^/sites/payroll/_vti_bin": {
        target: "http://127.0.0.1:9091/",
        changeOrigin: true,
        secure: false,
      },
      "^/_api": {
        target: "http://127.0.0.1:9091/sites/payroll/",
        changeOrigin: true,
        secure: false,
      },
      "^/~": {
        target: "http://127.0.0.1:9091/sites/payroll/",
        changeOrigin: true,
        secure: false,
      },
    },
  }
});

[koltyakov]

SP Proxy: http://localhost:9091 -> SharePoint Site Collection:http://sp19.int/sites/payroll FE Dev Server: http://localhost:5173 FE's Dev Proxy maps:

• ^/_api -> http://localhost:9091
• ^/_vti_bin -> http://localhost:9091

export default defineConfig({
 base: "",
 server: {
   proxy: {
     "^/_vti_bin": {
       target: "http://localhost:9091",
       changeOrigin: true,
       secure: false,
     },
     "^/_api": {
       target: "http://localhost:9091",
       changeOrigin: true,
       secure: false,
     },
   },
 }
});

Running locally, you assume that it's where site collection is located. Consuming APIs you query http://localhost:5173/_api/... for REST and http://localhost:5173/_vti_bin/client.svc/ProcessQuery which go to FE Dev Server, then a request is routed it to SP REST proxy (http://localhost:9091/_api/..., http://localhost:9091/_vti_bin/client.svc/ProcessQuery), SP Proxy does auth and routes to site collection's URLs (http://sp19.int/sites/payroll/_api/..., http://sp19.int/sites/payroll/_vti_bin/client.svc/ProcessQuery).

[dreamworks]

not sure if your last answer already covered all my updates - I editet it a few times :) My current config looks like this:

SP Proxy: http://localhost:9091 -> SharePoint Site Collection:http://sp19.int/ Dev Server: http://localhost:5173

[koltyakov]

If not only you have something specific to consume outside solution's site collection, I'd recommend setting SP Proxies context to point to a site collection's path and:

Ideally, solutions code knows nothing about exact path, it's just uses page context, so it ends up with http://localhost:5173/_api/etc... in a local dev server and http://sp19.int/sites/payroll/_api/etc... when deployed.

[koltyakov]

Just saw this:

And if one would ask me. sp-proxy might be anyhow a much better and clearer name for your wonderful project :) Kudos & very much appreciated!

Thank you @dreamworks!

Changing library name after it was out for a while is not what I'd want. I'm not a Microsoft or Google to constantly renaming things. REST is 99% of the use cases and initially was the only supported thing, only after I decided why not to proxy legacy SOAP, CSOM, and even assets. 😄

Best regards from Germany!

Cheers from sunny Texas!

[koltyakov]

Going to close this as answered. Hope you figured out your setup.

[dreamworks]

Going to close this as answered. Hope you figured out your setup.

Perfect! Yes and once again thx!