title: Cross-Origin Request Blocked between Node dev server and Spring Boot application
body: <p>My stack is as follows:</p>
  
  <p>Backend: Spring boot(Java) exposed at :8088</p>
  
  <p>Frontend: Vue hosted on a Node development server exposed at :8080</p>
  
  <p>On the frontend, I am re-configuring <code>axios</code> in a <code>http-common.js</code> to put the baseURL to the Spring boot application, and allow connection from the node development server:</p>
  
  <pre><code>import axios from 'axios'
  
  export const AXIOS = axios.create({
    baseURL: `http://localhost:8088`,
    headers: {
      'Access-Control-Allow-Origin': 'http://localhost:8080'
    }
  })
  </code></pre>
  
  <p>However, when attempting to make a <code>post</code> request to log in, I will get the following message in the console:</p>
  
  <p><code>Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8088/api/login. (Reason: CORS preflight channel did not succeed).</code></p>
  
  <p>Which makes me think: Is the issue with the spring boot application?</p>
  
  <p>But no, in the main method, I have enabled CORS globally when reaching the <code>/api/*</code> endpoints from the node application running at :8080:</p>
  
  <pre><code>@Bean
  public WebMvcConfigurer corsConfigurer() { // Enables CORS globally
      return new WebMvcConfigurerAdapter() {
          @Override
          public void addCorsMappings(CorsRegistry registry) {
              registry.addMapping("/api/*").allowedOrigins("http://localhost:8080");
          }
      };
  } 
  </code></pre>
  
  <p>To me it looks as if it should be configured correctly. However, as of now, the following POST of username + password never even reaches the backend Spring boot application at all. The issue must be with the Node application?</p>
  
  <p>This is the Login method in the frontend:</p>
  
  <pre><code>login ({commit}, authData) {
        AXIOS.post('/api/login', {
          username: authData.username,
          password: authData.password,
          withCredentials: true
        })
          .then(res =&gt; {
            console.log(res)
            commit('authUser', {
              token: res.data.idToken,
              userId: res.data.localId
            })
          })
          .catch(error =&gt; console.log(error))
      }
  </code></pre>
  
  <p>To further solidate my point, i can cURL to the spring boot application and get the correct response(a valid JWT!):</p>
  
  <p>Request:</p>
  
  <pre><code>curl -i -H "Content-Type: application/json" -X POST -d '{
          "username": "sysadmin",
          "password": "sysadmin"
          }' http://localhost:8088/api/login
  </code></pre>
  
  <p>Response:</p>
  
  <pre><code>HTTP/1.1 200
  X-Content-Type-Options: nosniff
  X-XSS-Protection: 1; mode=block
  Cache-Control: no-cache, no-store, max-age=0, must-revalidate
  Pragma: no-cache
  Expires: 0
  X-Frame-Options: DENY
  X-Application-Context: application:8088
  authentication: &lt;very long JWT string&gt;
  Content-Type: application/json;charset=UTF-8
  Transfer-Encoding: chunked
  </code></pre>
  
  <p>So, via cUR  - I get a HTTP 200 OK, and a valid JWT. But via the same POST method from :8080, I get a 403 and a warning message.</p>
  
  <p>As per other posts, I have attempted to add CORS to my dev server configuration(Node/Express):</p>
  
  <pre><code>var app = express()
  
  app.use(cors())
  app.options('*', cors())
  app.use(function (req, res, next) {
  
    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8088')
  
    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE')
  
    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type')
  
    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true)
  
    // Pass to next layer of middleware
    next()
  })
  </code></pre>
  
  <p>The result is exactly the same as previously</p>
  
  <p><a href="https://i.stack.imgur.com/YEwsX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YEwsX.png" alt="Screenshot of response headers"></a></p>