分类: Vue.js
原创日志

vue3下面使用axios，涉及到的跨域问题2种解决方案

[ 2022-05-11 10:48:39 | 作者: admin ]
字号: 大 | 中 | 小
开发环境中因为使用node+vue调试，一般都会有跨域问题，前端放在node下 http://localhost:8080 ，而接口放在 http://localhost:2020/myapi。
浏览器不允许跨域访问，报Access-Control-Allow-Origin限制。

解决方法一
利用vue提供的反向代理，配置vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
     transpileDependencies: true,
     devServer : {
      proxy : {
        '/proxyapi' : { //这里/proxyapi做识别用，url重写时会替换为空。同样axios的base_rul也需要配置为/proxyapi
          target : 'http://localhost:2020',
          ws : true,
          secure:false,
          changeOrigin : true,          
          pathRewrite : {
            '^/proxyapi' : ''
           }
        }
         }
     }
})

这样用axios访问本地node.js的web服务器 http://localhost:8080/proxyapi/myapi 都会自动转为 http://localhost:2020/myapi
axios.post('http://localhost:8080/proxyapi/myapi', {
         name: 'tom', sex:'male'
}).then((res) => {
     console.log(res.data)
})




解决办法二
修改后端的api接口，不让其报Access-Control-Allow-Origin 错误即可
header('Access-Control-Allow-Origin:http://localhost:8080');
header('Access-Control-Allow-Methods:POST,GET');
header('Access-Control-Allow-Credentials:true');
header('Access-Control-Allow-Headers:x-requested-with,content-type');

api接口如果有多个请求来源，可以加个判断。如开发环境和生产环境，或者存在多个生产环境
if( substr_count($_SERVER[HTTP_REFERER],'http://localhost:8080') ){
  header('Access-Control-Allow-Origin:http://localhost:8080');
}elseif( substr_count($_SERVER[HTTP_REFERER],'http://m.xg98.com') ){
  header('Access-Control-Allow-Origin:http://m.xg98.com');
}
[最后修改由 admin， 于 2022-05-11 11:52:35]
评论Feed 评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=2862

这篇日志没有评论。

此日志不可发表评论。