vue+axios解决跨域问题(建议从后端解决跨域这个问题)

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

报错信息：Access to XMLHttpRequest at 'http://127.0.0.1:3652/' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

原因：百度上面一大堆，我就不说了；

解决办法：

   一、从后端解决（我用的flask，所以就用flask说吧）：安装flask_cors库，如下即可

from flask_cors import CORS
import logging

app = Flask(__name__)
# CORS(app)

二、从前端解决这个办法：
在config文件里面的index.js里面添加一段代码：在module.exports里面添加一段代码，标红的

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
proxyTable: {
  '/api': {
   target: "http://0.0.0.0:3652",   #你后端的接口ip加端口，这里相当于baseURL
      changeOrigin: true,  #允许跨域
      pathRewrite: {
        '^/api': '/'   #以api开头的请求
      }
  }
 },
然后在请求中也需要改，写的时候不用加baseURL了（我就是坑到这里了），例如

created() {
  // axios.get('http://127.0.0.1:3652').then((res)=>{  #这里是原来的，就是坑到这里了
  axios.get('/api').then((res)=>{   #现在用这个，完美运行
    console.log(res),
    alert(res.data.return_info)
  })
}

以上是 vue+axios解决跨域问题(建议从后端解决跨域这个问题) 的全部内容， 来源链接： utcz.com/z/374686.html

回到顶部