前后端分离--vue项目部署到nginx上访问后台出现跨域问题

我的项目前后端分离部署,后台已经配置过cors,但前端访问静态页面没有问题,一旦发请求访问后台服务器时就出现跨域

如何解决,有大佬帮忙吗?

1. 前端访问时:

 

2. 前端代码

访问路径设置带上'/api'  --axios.defaults.baseURL = '/api'
config/index.js文件中build配置
 build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/formula/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

3. 前端项目部署准备用nginx跨域

配置为:

 server {
        listen       80;
        server_name  118.25.187.60;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        root /usr/myapp/nginx/dist;
        index index.html;


        location /api {
            rewrite ^/api/(.*)$ /$1 break;
            include uwsgi_params;
            proxy_pass http://129.204.68.6:8000;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
}

nginx配置好了之后,访问后台仍出现跨域问题

发布了2 篇原创文章 · 获赞 1 · 访问量 291

猜你喜欢

转载自blog.csdn.net/qq_42758273/article/details/104459185
今日推荐