在vue跟react开发过程中,遇到的问题.
开发模式,遇到了跨域问题.服务器不接受外网请求.
在初期的时候,尝试用postman去请求数据.是可以成功调取接口的.
但是在自己的服务器中却始终不能调通.
分析找问题的解决方案.

发现了在VUE,REACT全家桶中都有相应的配置文件.
利用了nodejs的middleware (中间件)
nodejs之http-proxy-middleware应用
后来发现在 apache,nginx的配置中都有相应的配置.
只是在这两个中叫做反向代理.

吐血放送出来:(不夸张,当时折腾了很久才把这几个都整理出来.)

nginx conf配置,两个地方可以配置,另一个是多虚拟主机的配置文件

server {
        listen       80;
        server_name  www.api.com api.com;
        root   "D:/phpstudy/www/api";
        location /api/ {
        proxy_pass   http://123.56.230.49/api/;

            index  index.html index.htm index.php;
            #autoindex  on;
        }
        location ~ \.php(.*)$ {
            fastcgi_pass   127.0.0.1:9000;
            fastcgi_index  index.php;
            fastcgi_split_path_info  ^((?U).+\.php)(/?.+)$;
            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
            fastcgi_param  PATH_INFO  $fastcgi_path_info;
            fastcgi_param  PATH_TRANSLATED  $document_root$fastcgi_path_info;
            include        fastcgi_params;
        }
}

测试:
$.ajax({
    url: "/api/v2/enterprise/search-sliders/C/替换自己的接口,注意这里不用加服务器ip,在上面的配置文件中,api已经被http://*****/api 所代理",
    type: 'GET',
    success: function (data) {
    	console.log(data)
    }
});

apache 的 配置文件

<VirtualHost *:80>
    DocumentRoot "D:\phpstudy\WWW\api"
    ServerName www.api.com
    ServerAlias api.com
  <Directory "D:\phpstudy\WWW\api">
      Options FollowSymLinks ExecCGI
      AllowOverride All
      Order allow,deny
      Allow from all
      Require all granted
  </Directory>
  ProxyPass /api/ http://123.56.230.49/api/
  ProxyPassReverse /api/ http://123.56.230.49/api/
</VirtualHost>

$.ajax({
    url: "/api/v2/enterprise/search-sliders/C替换自己的接口,注意这里不用加服务器ip,在上面的配置文件中,api已经被http://*****/api 所代理",
    type: 'GET',
    success: function (data) {
    	console.log(data)
    }
});

react全家桶 package.json

  "proxy": "http://www.freekeer.com/"

vue 全家桶 config/index.js

  dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://123.56.230.49/',
        pathRewrite: {
          '^/api': '/api'
        }
      }
    },
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }

vue webpack.dev.config.js

module.exports = merge(webpackBaseConfig, {
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    stats: {
      colors: true
    },
    port: '3000',
    proxy: {
      '/api': {
        target: 'http://123.56.230.49',
        pathRewrite: {
          '^/api': '/api'
        },
        changeOrigin: true
      }
    }
  },
  devtool: '#source-map',
  output: {
    publicPath: '/dist/',
    filename: '[name].js',
    chunkFilename: '[name].chunk.js'
  },
  plugins: [
    new ExtractTextPlugin({
      filename: '[name].css',
      allChunks: true
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: ['vender-exten', 'vender-base'],
      minChunks: Infinity
    }),
    new HtmlWebpackPlugin({
      title: 'iView admin v' + package.version,
      filename: '../index.html',
      template: './src/template/index.ejs',
      inject: false
    })
  ]
});

这里要注意的是vue的配置有两个,因为在不同的版本,或者衍生的版本里面,可能只有 config/index.js 或者 webpack.dev.config.js 这两个文件中的一个.这里并不是说,要两个都要配置.而是配置其中一个就行.

有需要的拿走不谢.(转载请注明出处)