微信小程序主题活动_详解VueJs前后端别离跨域问

详解VueJs前后端分离跨域问题       本篇文章主要介绍了详解VueJs前后端分离跨域问题，详细介绍了在项目内设置代理（proxyTable）的方式来解决跨域问题，有兴趣的可以了解一下

使用vue-cli搭建的vue项目

可以使用在项目内设置代理（proxyTable）的方式来解决跨域问题

设置配置项的目录在config下的index.js，主要通过配置proxyTable项，设置代理指向你的后台地址

dev: {
 env: require('./dev.env'),
 port: 8085,
 autoOpenBrowser: true,
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {
 '/agent': {
 target: '',
 changeOrigin: true,
 pathRewrite: {
 '^/agent': ''
 // CSS Sourcema凡科抠图 off by default because relative paths are "buggy"
 // with this option, according to the CSS-Loader README
 // (webpack/css-loader#sourcema凡科抠图)
 // In our experience, they generally work as expected,
 // just be aware of this issue when enabling this option.
 cssSourceMap: false

前端使用vue-resource来发起请求时

//在main.js中设置公用的地址
Vue.prototype.rootUrl = '/agent/';
//在具体page中发起请求的方式
that.$http.post(this.rootUrl + 'login', parms).then(function (response) {
 // 响应成功回调
 console.log(response);
 }, function (response) {
 // 响应错误回调

其他方式搭建的前端项目，通过使用nginx启动前端服务同时配置代理

下列是我的nginx配置文件，不管是通过什么方式搭建的前端项目，构建成功后都会输出一个dist文件，我们只需要将nginx服务目录指向你的dist文件下你项目的入口文件即可

< 使用的是vue-cli打包的项目，参考vue-cli npm run build的dist目录，指向那个目录下

#user nobody;
worker_processes 4;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/;
#pid logs/nginx.pid;
events {
 worker_connections 1024;
http {
 include mime.types;
 default_type application/octet-stream;
 #log_format main '$remote_addr - $remote_user [$time_local] "$request" "$status" $body_bytes_sent "$http_referer" "$http_user_agent" "$http_x_forwarded_for" "$gzip_ratio" $request_time $bytes_sent $request_length';
 log_format main '[$time_iso8601] [$remote_addr] [$request] [$http_user_agent] [$cookie_customerID_cookie_flag] [$args]';
 access_log logs/access.log main;
 sendfile on;
 #tcp_nopush on;
 #keepalive_timeout 0;
 keepalive_timeout 65;
 gzip on;
 gzip_min_length 1k;
 gzip_buffers 4 16k;
 gzip_http_version 1.0;
 p_level 3;
 gzip_proxied any;
 gzip_types *;
 server {
 listen 80;
 root D:\openplatform\portal\webapp\dist;
 ;
 location / {
 try_files $uri $uri/ @router;
 ;
 location @router {
  last;
 location ^~/agent/ {
 proxy_pass ;
 proxy_redirect  /;
 proxy_set_header Host $host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header REMOTE-HOST $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_connect_timeout 600s;
 proxy_read_timeout 600s;
 proxy_send_timeout 600s;