0

After several attempts to overcome the CORS issue in vuejs axios. no solution up to know, any suggestions please

  1. Create vue.config.js file
    devServer: {
        proxy: 'http://alantin.gr'
    },
  }; ``` 

2. Create webpack.config.js

module.exports = {
    //...
    devServer: {
        headers: {
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
          "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
        }
      }
  };

  1. Add several plugins but didn't work or for security reasons was being disabled

  2. Here is my app.vue file with the source code with in it

<template>
  <div id="app">
    {{data}}
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      data: {}
    }
  },
  beforeMount(){
    this.getName();
  },
  methods: {
    async getName(){
      const res = await fetch('http://alantin.gr/users/');
      const data = await res.json();
      this.data = data;
    }
  }
};
</script>

Also the vue.config.js file exist on the root directory of the project folder tree

last the package.json context

{
  "name": "aflix",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@vue/cli": "^5.0.8",
    "axios": "^0.27.2",
    "core-js": "^3.6.5",
    "g": "^2.0.1",
    "vue": "^3.0.0",
    "vue-axios": "^3.4.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.9",
    "@vue/cli-plugin-eslint": "~4.5.9",
    "@vue/cli-service": "^4.5.19",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}
Antonis Giallelis
  • 1
  • 4

1 Answers1

0

To overpass cors i use this tricky solution: create a file launch.json inside .vscode folder. Paste and copy this:

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome",
        "url": "http://localhost:3000",
        "runtimeArgs": [
            "--disable-web-security",
        ],
        "webRoot": "${workspaceFolder}"
      }
    ]
  }

this configuration file set chrome with argument line: --disable-web-security, so in this chrome, cors will be disabled.

Than use vscode debug to launch custom chrome and you are done.

Remember to be careful while doing this, because as known cors purpose is to prevent malicious http redirect, if disable you are vulnerable to anything in the web.

Levi D.
  • 176
  • 8