Access to XMLHttpRequest at '…' from origin '…' has been blocked by CORS policy

Access to XMLHttpRequest at '…' from origin '…' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

服務器不允許跨域訪問。跨域訪問發生在客戶端和服務器，而服務器和服務器間不會發生跨域訪問問題，所以解決辦法是使用請求代理。

在項目根目錄下新建vue.config.js文件，該文件在老版vue中自帶，但認為並不是每個項目中都會用到，所以改為了內置(名字和位置必須正確，否則vue不識別該文件)，現在要用的話需要自行創建。

module.exports = {
    //服務器配置
    devServer: {
        //代理
        proxy: {
            '/api': {
                //只要輸入/api(該路徑可自定義)會自動重定向(替換)為target中的地址(服務器地址)
                target: 'https://api.binstd.com/recipe/search',
                //changeOrigin：true 允許跨域
                changeOrigin: true,
                //路徑重寫，/api是自定義路徑，真正項目中是沒有這個路徑的，所以要去掉
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

修改后記得要重啟vue項目以便生效。