經過多次嘗試克服 CORS 問題。 沒有解決方案，請有任何建議

Question

經過多次嘗試克服 vuejs axios 中的 CORS 問題。 沒有解決方案，請有任何建議

1. 創建 vue.config.js 文件

    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"
        }
      }
  };

3. 添加幾個插件但沒有工作或出於安全原因被禁用

4. 這是我的 app.vue 文件，其中包含源代碼

<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>

vue.config.js 文件也存在於項目文件夾樹的根目錄中

最后 package.json 上下文

{
  "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"
  ]
}

Answer 1

為了超越 cors 我使用這個棘手的解決方案：在.vscode文件夾中創建一個文件launch.json 。 粘貼並復制：

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

此配置文件使用參數行設置 chrome： --disable-web-security ，因此在此 chrome 中，cors 將被禁用。

比使用 vscode 調試來啟動自定義 chrome，你就完成了。

請記住在執行此操作時要小心，因為眾所周知 cors 的目的是防止惡意 http 重定向，如果禁用，您很容易受到 web 中的任何內容的攻擊。